Free CSS Box Shadow Generator

Design single or layered box-shadows with sliders and a live preview, then copy the CSS.

Presets
Preview
Layer 1
Offset X (px)0
Offset Y (px)4
Blur (px)12
Spread (px)0
Opacity (%)20
box-shadow: 0px 4px 12px 0px rgba(28, 27, 41, 0.2);

How to use / FAQ

Drag the sliders and the preview card updates instantly — then copy the finished box-shadow declaration. Start from a preset (the Elevated one shows the layered technique modern UI kits use), stack as many layers as you like, and flip any layer to inset for inner shadows.

What do the four numbers in box-shadow mean?

Offset-x, offset-y, blur radius, spread radius — in that order. The offsets push the shadow sideways and down (negative values go left/up), blur softens its edge, and spread grows or shrinks the shadow before blurring. The color comes last, usually an rgba() so the page background shows through.

Why do professional shadows use multiple layers?

Real shadows have both a tight, dark contact edge and a wide, faint ambient falloff. One box-shadow can't do both, so design systems stack two or three: a small sharp layer, a medium one, and a large soft one, each slightly more transparent. Comma-separate the layers in one declaration — the first layer paints on top.

What does inset do?

It flips the shadow inside the element's border, darkening the inner edge instead of casting outward. Inset shadows read as a recessed or pressed surface — common for wells, input fields, and toggle tracks.

When should I use filter: drop-shadow() instead?

box-shadow follows the element's rectangular border box (rounded corners included). drop-shadow() follows the rendered alpha shape, so it's the right choice for transparent PNGs and irregular SVG shapes — but it has no spread value and can't be inset.

Is anything sent to a server?

No — the CSS is assembled in your browser as you move the sliders. Nothing is uploaded or stored.