TOOLTIKI Lovable tool, really free
Colour CSS

Box shadow generator

Layer 1

Generated in your browser · nothing is uploaded

Live preview · stack layers for a real shadow
Advertisement
320 × 100

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

1 Drag offset, blur and spread.
2 Add a second layer — real shadows are never one.
3 Switch to inset for an inner shadow.
4 Copy the CSS.

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.

MDN — box-shadow
Advertisement
300 × 250
Was this tool any good?
INTERNAL SIGNAL ONLY · WE USE IT TO FIND TOOLS WORTH REBUILDING