CSS box-shadow generator

How it works

Box-shadow takes four numbers and a colour in a specific order, and the difference between a shadow that reads as depth and one that reads as a sticker is entirely in those numbers. Seeing it change as you drag is much faster than guessing.

What the four numbers mean

In order: horizontal offset, vertical offset, blur radius, and spread. Offsets move the shadow; blur softens its edge; spread grows or shrinks it before blurring. A negative spread pulls the shadow in, which is how you get a tight shadow under a card without it bleeding out at the sides.

Making it look real

Light usually comes from above, so a small positive vertical offset with no horizontal offset reads as natural. Large, very transparent shadows read as soft depth; small, dark, sharp ones read as a cut-out sticker. Real objects cast shadows that are blurrier the further they are from the surface — a bigger blur implies a higher element.

Inset shadows

An inset shadow is drawn inside the element instead of outside, which is how pressed buttons, input fields and inset panels are made. The same four numbers apply, just pointing inwards.

Several shadows at once

CSS accepts a comma-separated list, and layering two — one tight and dark, one wide and faint — looks considerably better than a single one. This generator produces one; paste two together yourself for the layered effect.