CSS Box Shadow Generator

Build CSS box-shadow values by eye: set the X and Y offset, blur, spread, colour, opacity and inset for each layer, stack several shadows and reorder them, try presets like soft, layered or neumorphic, and copy the finished box-shadow declaration.

This tool runs entirely in your browser.

Loading tool…

How to use the CSS Box Shadow Generator

1Pick a preset or start from the default soft shadow.
2Adjust the offsets, blur, spread, colour and opacity with the sliders or type exact pixel values.
3Add more layers with “Add shadow”, choose one with the number buttons and move it up or down — layer 1 is drawn on top.
4Change the preview background and card colour to check the shadow in context, then copy the CSS.

What is the CSS Box Shadow Generator?

box-shadow takes one or more comma-separated shadows, each written as x-offset y-offset blur spread colour, with an optional inset keyword. Positive offsets move the shadow right and down; blur softens its edge and spread grows or shrinks it before blurring. The first shadow in the list is painted on top.

Realistic shadows usually combine several layers with low opacity — a tight, darker one for contact and wider, fainter ones for distance. The generator writes colours as rgba() so opacity is kept separate from the colour, and omits zero spread and blur so the output stays short.

Frequently asked questions

What is the difference between blur and spread?

Spread changes the size of the shadow shape before it is blurred: positive values grow it, negative values shrink it. Blur only softens the edge. A negative spread with a large blur gives a shadow that only shows below the element.

How do I put a shadow on only one side?

Offset the shadow towards that side and use a negative spread about the size of the blur, for example box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.4) for the bottom edge.

Does box-shadow affect layout or performance?

It never changes layout — the shadow takes no space and isn’t part of the box size. Very large blurs on many elements, or animating box-shadow directly, can be slow; animate the opacity of a pseudo-element that carries the shadow instead.

Why doesn’t my shadow follow a transparent PNG’s shape?

box-shadow always follows the element’s box and border-radius. For the outline of an image’s visible pixels use filter: drop-shadow() instead.

Is the CSS Box Shadow Generator free and private?

Yes. The CSS Box Shadow Generator is free, needs no account, and runs entirely in your browser. What you type is never sent to a server or stored.

All developer tools →