What is a Box Shadow Generator?
Shadow values are unintuitive — the difference between “floating card” and “smudged box” is a few pixels of blur and spread.
Five sliders, instant preview, copy the CSS. Negative spread (the secret to tight, elegant shadows) included.
How to use the Box Shadow Generator
- Drag the sliders and watch the preview.
- Stop when it looks right.
- Copy the CSS.
Frequently asked questions
What does spread do?
Grows (positive) or shrinks (negative) the shadow before blurring. Negative spread keeps large blurs from bleeding sideways — the modern “soft elevation” look.
How do layered shadows work?
Comma-separate multiple shadows: a tight dark one for contact plus a wide faint one for ambience reads most naturally.
Why rgba instead of a solid color?
Transparent shadows blend with any background; solid grey shadows look muddy on colored surfaces.
Do shadows hurt performance?
Static shadows are cheap. Animating box-shadow is not — animate opacity of a pseudo-element instead.