Design system governance
Four buttons, all named Button.
The parser resolves every consumer of a component before it reports a single finding, so severity is measured in teams affected rather than in files touched.
Tools — 09
A shadow is a claim about where the light is.
One layer looks like a sticker. Two layers — a wide ambient wash and a tighter contact shadow — read as an object on a surface. Build it here, on a card that actually belongs to this site, so you can see whether it fits the brand rather than whether it fits a grey square.
Editor
Brand presets
Corner
Shadow layers
Preview
border-radius: 0px;
box-shadow: 0px 2px 8px 0px rgb(0 22 25 / 8%), 0px 12px 32px -8px rgb(0 22 25 / 12%);Reference
A convincing CSS shadow uses two or three stacked box-shadow layers, not one: a tight, near-opaque layer for contact and one or two wider, fainter layers for ambient light. box-shadow accepts a comma-separated list, drawn first layer on top.
Why do layered shadows look more realistic?
Because real shadows have two components. A small dark region where the object nearly touches the surface, and a broad soft region from ambient light — one blur radius cannot be both.
A single 0 4px 12px shadow at 20% opacity reads as a grey smudge. The same total darkness split across a 1px contact layer and a 16px ambient layer reads as elevation.
What do the box-shadow values mean?
In order: horizontal offset, vertical offset, blur radius, optional spread radius, then colour. The blur radius softens the edge; the spread grows or shrinks the whole shape before blurring.
Keep the horizontal offset at 0 for interface elevation. A sideways shadow implies a light source to one side, which is only consistent if every shadow on the page agrees with it.
How do border-radius and shadow relate?
The shadow follows the border box, so it inherits the radius automatically. The mistake is nesting: a child inside a rounded parent needs a smaller radius than its parent, not the same one.
The rule is that the inner radius equals the outer radius minus the padding between them. Equal radii make the gap between the two curves appear to pinch.
Do shadows affect performance?
A static box-shadow is cheap. Animating one is not, because the browser repaints the blurred region on every frame.
To animate elevation, cross-fade the opacity of a pseudo-element that carries the larger shadow. Opacity is compositor-friendly; blur radius is not.
Common questions
- How many shadow layers should an elevation use?
- Two or three. One tight layer with a small blur for contact, plus one or two wider, lower-opacity layers for ambient light. More than three adds paint cost without a visible difference.
- What is the difference between blur and spread in box-shadow?
- Blur softens the shadow's edge outward from its shape. Spread changes the size of the shape itself before any blurring, and can be negative to pull the shadow in behind the element.
- Why does my nested rounded corner look wrong?
- Because the inner and outer radii are the same. The inner radius should be the outer radius minus the padding between them, otherwise the two curves are not concentric and the gap appears to pinch.