CSS box-shadow generator

About this tool

A box-shadow takes up to four lengths and a colour: horizontal offset, vertical offset, blur radius, spread radius. Only the first two are required. Add the inset keyword and the shadow is drawn inside the box instead of behind it. Several shadows can be listed on one declaration, separated by commas, and they are painted with the first in the list on top.

How it works

Each layer below is written out in full — all four lengths, then the colour — and the layers are joined with commas in the order shown. Moving a layer up moves it towards the front of the paint order. Layers can be switched off without deleting them, which is the quickest way to see what one of them is actually contributing.

Blur and spread do different jobs and are easy to confuse. Blur softens the edge outwards from the shadow's own shape; spread makes that shape bigger (or smaller, if negative) before any blurring happens. A shadow with spread and no blur is a hard-edged offset rectangle, which is how the "hard" preset works.

Common questions

Why do real interfaces use two or three shadows instead of one?

Because a single large blur reads as fog rather than lift. A tight, nearly opaque shadow gives the edge definition and a wider, fainter one gives the ambient depth — that pairing is what most design systems ship, and it is what the "card" and "elevated" presets do here.

Why is my inset shadow invisible?

Usually because the element has no visible background of its own, so there is nothing for the inner shadow to fall on, or because the offsets are smaller than the blur and it is being painted under the content. Give the box a background colour and try a vertical offset with no horizontal one.

Does a shadow affect layout?

No. box-shadow is painted outside the box model — it never adds to the element's size and never pushes a neighbour along. That is also why it can be clipped by a parent with overflow: hidden.

What about a shadow on the shape, not the box?

For a transparent PNG, an SVG icon or a clipped shape, box-shadow will trace the rectangle rather than the artwork. filter: drop-shadow() follows the alpha channel instead. This page does not generate it.

Known limitations

• Pixels onlyOffsets, blur and spread are generated in px. If you work in rem, convert afterwards — the numbers are the same, only the unit changes.
• All four lengths are always writtenIncluding a spread of 0px, which CSS allows you to omit. Kept deliberately: four numbers in a fixed order are easier to read and edit than three that might be four.
• No text-shadow or drop-shadowBoth are separate properties with different syntax — text-shadow has no spread, and drop-shadow() is a filter function. Neither is generated here.
• The preview is one box on a flat backgroundHow a shadow reads depends on what is behind it. Change the two colours above to something close to your real design before judging it.

The same job in the browser's own tools

• Elements → Styles → the shadow editorChrome and Edge DevTools show a small swatch next to a box-shadow value that opens an editor for offset, blur, spread and colour on the live element.
• getComputedStyle(el).boxShadowRead back the resolved value, in the browser's own normalised order — useful when a shadow is being set from more than one rule.
• Rendering → Paint flashingLarge blurred shadows on animated elements are a common cause of repaint cost; DevTools' paint flashing shows what is being repainted while the animation runs.