box-shadow · rgba
CSS shadow generator
Tune shadow color, opacity, offset, blur, and spread on a live card preview, then copy a single box-shadow declaration for buttons, cards, and modals.
box-shadow
Why this tool exists
Shadows are where “almost right” UI lives. A green-tinted shadow on a blue card feels off even when users cannot name why. Color-aware shadows keep elevation honest.
How to use it
- Pick shadow color — often a darker, desaturated variant of your surface hue.
- Adjust Y offset and blur until the card lifts without halo artifacts.
- Copy CSS into your component library.
- Stack with patterns sparingly — too much depth reads noisy.
Use a different tool when…
You only need Material elevation tokens already defined — import those instead.
Practical tips
- Lower opacity (15–35%) often looks more natural than heavy black at 50%.
- Spread negative values tighten shadows for pressed states.
- Colored shadows work on brand-heavy sites; neutral UIs prefer near-black rgba.
FAQ
Can I stack multiple shadows?
This page outputs one layer — concatenate in CSS for stacked elevation.
Why rgba in output?
Opacity is separate from hex for easier tweaking in devtools.
Does inset work?
Add the inset keyword manually after copying if you need pressed inputs.
Will shadows print?
Print styles often remove shadows — design PDFs without relying on them.
Dark mode shadows?
Use darker, higher-opacity shadows on #121212 surfaces; test visually.