jsontools
Free · No signup · No tracking

CSS Box-Shadow Generator

Build single or layered box-shadow values visually, then copy the CSS. Free, no signup, no data sent to servers.

Preview bg
Shadow layers
Presets
Import an existing value
CSS
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

The box-shadow syntax

A box-shadow value is offset-x, offset-y, blur-radius, spread-radius, and a color, with an optional inset keyword to draw the shadow inside the element instead of outside it.

offset-x / offset-yHorizontal / vertical distance — negative values shift left / up
blur-radiusHigher values spread the shadow into a softer edge; 0 is a hard-edged shadow
spread-radiusGrows (positive) or shrinks (negative) the shadow shape before blurring
insetDraws the shadow inside the element's border box instead of outside it

Layering multiple shadows

box-shadow accepts a comma-separated list: each layer paints independently, in the order written, with the first shadow on top. A common pattern for realistic depth is two layers, a tight, low-opacity shadow close to the element plus a larger, softer one further out, rather than a single large blur.

Layering an inset shadow with a regular one is also how many "pressed button" or "carved" effects are built: the inset layer darkens the inner edge while the outer layer keeps the element grounded.

Performance note

A large blur-radius forces the browser to repaint a bigger area on every frame, which matters for shadows on elements that animate or scroll. If a hover-triggered shadow causes visible jank, try animating opacity on a pseudo-element with the shadow instead of the blur radius itself.