CSS Box Shadow Generator — Visual Builder

Blur and spread are not the same

Most people conflate blur and spread, but they do very different things. Spread radius (–50px to +50px) grows or shrinks the shadow's shape before any blurring happens. A negative spread (say, –8px) with a large blur radius (40–60px) creates a tight, dark contact shadow that grounds your element—the single most useful shadow combination to know. Blur radius (0–100px on this tool) softens that already-shaped shadow. Together they produce believable depth.

Real elevation comes from stacking shadows

A single shadow, no matter how large, looks flat. Real depth is two or three stacked shadows: a tight dark one for contact, a wider soft one for ambient light, separated by commas in one CSS declaration. This tool emits one shadow at a time, so for elevation you'll copy the output, then manually add more comma-separated shadows by editing the CSS directly. For example: box-shadow: inset 0 1px 2px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2), 0 8px 16px rgba(0,0,0,0.15); Designing these stacks is where the real control lives.

Inset draws the shadow inside the border box

The inset toggle inverts the entire shadow, drawing it inside the element's border instead of outside. This is how you make pressed buttons (dark shadow on top, like a dent) and inset wells or input fields that read as recessed. Without inset, you get a drop shadow; with it, you get depth that reads as pressed or inset.

Performance: large blur is expensive to repaint

Box-shadow with a large blur radius is computationally expensive to repaint, especially on :hover or during scroll. If you're animating shadows or applying them to hundreds of elements in a long scrolling list, use transform: translateY() or swap pre-rendered shadow classes instead—much cheaper for animation. This tool does not animate; just remember the limit when you do.

A shadow and a border radius have to agree, because the shadow traces the rounded edge rather than the rectangle. Set the corners with the border radius generator.