Box shadow generator
Generated in your browser · nothing is uploaded
Builds a `box-shadow` from offset, blur, spread and colour, with as many stacked layers as you want and an inset option. The preview is a real element with the shadow applied.
How to use the box shadow generator
The single change that makes a shadow look convincing is using more than one layer. A real shadow is dense and tight near the object and soft and wide further out, and one shadow cannot be both. Two or three — a small dark one at low blur, a larger faint one at high blur — is what every design system does, and it is why a hand-written single shadow tends to look like a grey smudge. Spread is the value people skip and it is the useful one. It grows or shrinks the shadow before the blur is applied, so a **negative** spread with a large blur gives the soft halo directly under an element that looks like real contact. And a shadow with zero blur and a positive spread is not a shadow at all — it is a border that does not affect layout, which is a common trick for focus rings. Opacity matters more than colour. A shadow made from pure black at low alpha looks grey and dead; taking the hue of the background and darkening it — a slightly blue-black on a cool page — reads as light rather than as dirt. Nothing about that is a CSS feature; it is just what looks right.
Questions
It is probably one layer. Real shadows are tight and dark close in, soft and wide further out — that needs at least two.