Box Shadow Generator

What the four box-shadow values do

In order: horizontal offset, vertical offset, blur radius and spread. Offset moves the shadow, blur softens its edge, and spread grows or shrinks it before the blur is applied. A negative spread is the quiet trick behind most good shadows — it pulls the shape in so a large blur reads as soft ambient light rather than a grey halo.

One shadow looks cheap, two look real

Physical objects cast a tight, dark contact shadow directly beneath them and a wide, faint ambient shadow further out. Reproducing both — a small blur at low offset plus a large blur at higher offset — is the difference between a card that looks pasted on and one that looks lifted. Keep both low in opacity and let the layering do the work.

Shadows barely work in dark mode

A dark shadow on a dark surface is invisible, so elevation has to be expressed another way. The usual answer is a lighter surface colour for higher elevation, sometimes with a subtle top border catching imaginary light. Design both modes together, or your carefully-tuned dark-mode hierarchy will simply flatten.

How to use the box shadow generator

1. Start with the contact layer: a small vertical offset and a tight blur at low opacity.
2. Add an ambient layer with a larger offset, a much larger blur, and a negative spread.
3. Keep every layer's opacity low — depth comes from stacking, not from one dark shadow.
4. Check the result on both a light and a dark surface before committing.
5. Copy the CSS, which outputs all layers as a single comma-separated box-shadow.

Use it with

• Border Radius Generator — Shape each corner independently, including nested radii, and copy the CSS.
• Flexbox Generator — Build a flex layout visually and copy the CSS, with a live preview that shows what each property does.
• Gradient Generator — Build linear and radial CSS gradients with as many stops as you need, and copy the code.

Frequently asked questions

How do I make a realistic CSS box shadow?

Use two layers. A tight, slightly darker contact shadow directly under the element, plus a wide, very soft ambient shadow with a negative spread. Both at low opacity. Single-layer shadows are what make cards look pasted on.

What does spread do in box-shadow?

It grows or shrinks the shadow shape before the blur is applied. A negative spread pulls the shadow in, which lets you use a large blur radius without the shadow bleeding out into a grey halo.

How should I show elevation in dark mode?

Not with shadows — a dark shadow on a dark surface is invisible. Use progressively lighter surface colours for higher elevation instead, optionally with a subtle light top border.