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.
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.