What the four numbers do
In x y blur spread color: the offsets push the shadow sideways and down (light from above means positive Y), blur softens the edge, and spread grows or shrinks the shadow before blurring. The trick most generators hide: a negative spread with a generous blur keeps the shadow tucked under the element, which is what makes shadows look like depth instead of dirt.
Realistic shadows are layered
Real light produces both a tight dark contact shadow and a wide faint ambient one. CSS accepts a comma-separated list, so combine two or three: 0 1px 2px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.12). Start from the Card preset, add a second softer layer, and lower each layer's opacity — several weak shadows beat one strong one every time.
Frequently asked questions
Does anything get uploaded?
No. The preview is a real element with your shadow on it, drawn in the page.
Why does my shadow look fake?
Usually one large soft shadow. Real objects cast a tight dark shadow close to the edge and a wider faint one beyond it — layering two or three is what makes it convincing.
Do box shadows hurt performance?
Large blur radii on many elements do, because the browser recomputes them on every repaint. Animating a shadow is worse; animate opacity on a second element instead.
What is the spread value for?
It grows or shrinks the shadow before blurring. A negative spread pulls it in, which is how you get a shadow narrower than the element.
Something wrong with this tool, or an idea for it? Tell us