How to Use This Tool
Adjust the layers and copy the CSS. Start from a preset if you want something that already looks right — each one is a real layered shadow rather than a single blur.
The four numbers
box-shadow: x y blur spread colour;
- x and y — how far the shadow is offset. Almost always y only, because light comes from above in nearly every interface.
- blur — how soft the edge is. Zero gives a hard-edged copy of the shape.
- spread — grows or shrinks the shadow before blurring. This is the one nobody uses and it is the most useful.
- colour — usually black at low opacity, and see below for why that is a compromise.
Spread, properly
A positive spread makes the shadow larger than the box in every direction; a negative one makes it smaller. Combine a negative spread with a large blur and you get a soft halo that hugs the shape without a visible edge — the look that reads as expensive, and one that blur alone cannot produce.
The other common use is a shadow with zero blur and a positive spread, which is a solid outline that follows the border radius. It is a useful focus ring and it does not affect layout the way a border does.
Black is a compromise
A pure black shadow at low opacity greys out whatever is behind it, which is why shadows on coloured backgrounds often look muddy. A shadow is really an absence of light, so it should carry a hint of the surface colour — a slightly blue-tinted shadow on a blue-grey background reads as far more natural than a grey one.
Try setting the shadow colour to a very dark, very saturated version of your background hue rather than to black. The difference is small per element and noticeable across a whole interface.
Performance
- Large blur radii are expensive to composite, particularly on many elements at once. A list of a hundred cards each with a 40-pixel blur is a measurable cost on lower-end devices.
- Do not animate box-shadow. It triggers a repaint on every frame. The standard
technique is to put the shadow on a pseudo-element and animate its
opacity, which the compositor can handle without repainting. - Inset shadows draw inside the box and are useful for pressed states and inputs, where an outer shadow would look like the element is floating rather than recessed.
