What do the box-shadow values mean?

box-shadow: x-offset y-offset blur spread color; — positive offsets move the shadow right/down, blur softens the edge, and spread grows or shrinks the shadow before blurring.

How do I make a soft, modern shadow?

Use a small vertical offset, generous blur, slight negative spread, and low opacity — e.g. 0 4px 12px rgba(0,0,0,0.15). Layering two shadows (one tight, one wide) adds realistic depth.

Box Shadow Generator

Design the perfect CSS box-shadow with live sliders for horizontal and vertical offset, blur radius, spread, color, and opacity — including inset shadows. The preview updates on a sample card as you drag, and the generated CSS is ready to copy. Includes preset shadows matching popular design-system elevation styles.

Design Tools

Horizontal offset0px

Vertical offset4px

Blur radius12px

Spread-2px

Opacity15%

Shadow color

Inset (inner shadow)

CSS

box-shadow: 0px 4px 12px -2px rgba(0, 0, 0, 0.15);

Private by default

This tool runs entirely in your browser. Your data is never uploaded to a server.

How to use

4 clear steps.

Drag the sliders for offset, blur, and spread.
Pick the shadow color and opacity.
Toggle inset for inner shadows.
Copy the generated box-shadow CSS.

Good to know

Frequently asked questions

What do the box-shadow values mean?: box-shadow: x-offset y-offset blur spread color; — positive offsets move the shadow right/down, blur softens the edge, and spread grows or shrinks the shadow before blurring.
How do I make a soft, modern shadow?: Use a small vertical offset, generous blur, slight negative spread, and low opacity — e.g. 0 4px 12px rgba(0,0,0,0.15). Layering two shadows (one tight, one wide) adds realistic depth.