CSS Box Shadow Generator

The box-shadow syntax

box-shadow: <x-offset> <y-offset> <blur> <spread> <colour> [inset];

• x-offset: positive = right, negative = left.
• y-offset: positive = down, negative = up.
• blur: 0 = hard edge, higher = softer. Visible size is roughly 1.5x blur beyond the element.
• spread: extra size beyond the element. Positive grows the shadow; negative shrinks it (useful for subtle halos).
• colour: supports any CSS colour. rgba(0, 0, 0, 0.15) is the bread and butter.
• inset: keyword flipping the shadow inside the element.

Layered shadows look real

This generator outputs one shadow rule at a time, so to build a layered shadow, generate each layer separately and combine the rules with a comma.

One shadow with 0 0 40px looks hazy. Two shadows, a small sharp one close to the element and a larger soft one further out, mimic how real light scatters.

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

The first line gives the tight contact shadow; the second the softer ambient. This single pattern covers 80% of card-style UI.

Elevation systems

Material Design uses 6 elevation levels, each a different shadow stack. Simplified:

Pick one per elevation role and use it consistently.

Coloured shadows read more naturally

Pure black shadows look artificial because real shadows are tinted by the surface below them. Try:

box-shadow: 0 12px 24px rgba(40, 80, 120, 0.18);

• a cool blue-grey instead of pure black. On warm backgrounds, use a warmer tint.

Performance

Box-shadows are painted on every repaint. Large, heavy shadows on many elements can slow scrolling. Mitigations:

• Use transform: translateZ(0) on the element to force a composite layer.
• Replace complex shadows with filter: drop-shadow() only if you need the shadow to follow a clip-path (it is slower in general).
• Limit shadows on elements that re-render frequently.

Inset for pressed states

.button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
}

Inset shadows fake a recessed look, the button appears pressed into the surface. Combine with a small downward transform: translateY(1px) for a tactile click.