CSS Box Shadow Generator

How to use

1. Start from a preset — they are the two-layer recipes, not single shadows.
2. Adjust the offset, blur, spread and colour of each layer, and add another if you need more depth.
3. Check it on both surfaces: a shadow tuned on white usually disappears on dark.
4. Copy the declaration, or paste an existing box-shadow in to edit it.

Features

• Layers are the unit, because real elevation is a tight contact shadow plus a wide soft one — a single blurred shadow is what makes a card look like it has a grey halo.
• Reads an existing shadow back out of CSS, including multi-layer values, so you can edit what you already have rather than rebuilding it.
• Handles the comma inside rgba() correctly when parsing, which is where naive splitting breaks.
• Inset shadows for pressed and inset-well effects, in any layer.
• Preview on light and dark surfaces, because opacity that reads as a shadow on white reads as nothing on slate.

Frequently asked questions

Why do the presets use two shadows instead of one?

Because that is what elevation looks like. A raised surface casts a small, relatively dark shadow where it nearly touches the page, and a much larger, much softer one further out. One shadow with a big blur and 40% black gives the flat grey halo that every design system moved away from. The layers are cheap — the browser composites them in one paint.

Which layer is on top?

The first one in the list. Shadows paint in order, so the tight contact shadow is written first and the wide ambient layer sits underneath it. Getting this backwards is the usual reason a hand-written multi-layer shadow looks muddy.

What is the difference between blur and spread?

Spread changes the size of the shadow before it is blurred; blur softens its edge. A negative spread with a large blur is the trick behind most modern elevation: the shadow is pulled in tight underneath the element and then feathered outward, so it reads as depth rather than as a border.

Why is my shadow invisible in dark mode?

Because a shadow works by darkening what is behind it, and there is very little left to darken on a dark background. Dark interfaces usually convey elevation another way — a lighter surface colour, a subtle top border, or a shadow with far higher opacity and a larger spread. Use the surface toggle here to check before shipping.

Related tools