CSS Box-Shadow Generator
Stack several soft layers instead of one hard one — that is the whole secret to a shadow that looks real.
Shadow layers
What the cSS Box-Shadow Generator does
The box-shadow property takes up to five values: a horizontal offset, a vertical
offset, a blur radius, a spread radius and a colour, with an optional inset keyword to
draw the shadow inside the element instead of outside it. This generator exposes all of them with a
live preview so you can see the effect of each rather than guessing.
The single most useful thing to know about shadows is that one layer rarely looks convincing.
Real shadows are not uniform: close to the object the shadow is dark and tight, and further away it
becomes broad and faint. A single box-shadow can only express one of those. Stacking two
or three — a tight, slightly dark one plus a large, very soft one — produces depth that a
single layer cannot. The card and floating presets here are built that way, and
they are worth studying as a starting point.
Spread is the value people most often overlook. Positive spread grows the shadow in every direction before blurring; negative spread shrinks it. Negative spread on a large, soft layer is the trick that keeps a big shadow from bleeding out sideways, which is what makes it read as height rather than as a glow.
Opacity matters more than colour. A pure black shadow at 15% opacity almost always looks better than a grey shadow at full opacity, because it darkens whatever is underneath rather than painting grey over it. On coloured backgrounds, tinting the shadow towards the background's hue looks more natural still.
How to use it
- Start from a preset — card is a sensible default for most interface work.
- Adjust offset, blur and spread on each layer and watch the preview.
- Add a layer if you want more depth: a tight dark one plus a wide soft one reads as height.
- Set the stage and box colours to match your actual design, then copy the CSS.
A worked example
A single-layer shadow, and the two-layer version of roughly the same depth:
/* one layer — flat, slightly muddy */
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
/* two layers — reads as an object above a surface */
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.10),
0 8px 24px -4px rgba(0, 0, 0, 0.16);The second version does two things the first cannot. The 1 px layer defines the object's contact with the surface, which is what your eye reads as “resting on”. The −4 px spread on the large layer pulls it in so it falls beneath the element instead of haloing around it. Both layers are lighter than the single one, and the result still looks deeper.
Frequently asked questions
What is the difference between blur and spread?
Blur softens the shadow's edge without changing its size at the centre. Spread changes the shadow's size before the blur is applied — positive grows it, negative shrinks it. Negative spread on a large blurred layer is what stops a big shadow from spilling out sideways.
How do I make a shadow on only one side?
Use offset plus negative spread. For a shadow only below an element, try 0 8px 12px -6px rgba(0,0,0,.3) — the negative spread pulls the shadow in on the sides while the vertical offset pushes it down.
Does box-shadow affect layout?
No. Shadows are painted outside the box model and do not take up space or push neighbouring elements around, which is what makes them safe to add to an existing layout. They can, however, be clipped by an ancestor with overflow: hidden.
Are lots of shadow layers bad for performance?
Each layer costs something to paint, and very large blur radii are the expensive part. Two or three layers on a handful of elements is fine. Hundreds of shadowed elements, or animating a shadow directly, can cause jank — animate opacity on a pseudo-element carrying the shadow instead.