Four numbers and a colour
A box shadow takes a horizontal offset, a vertical offset, a blur radius and a spread, plus a colour. The first two place it, the blur decides whether it reads as a crisp edge or a diffuse glow, and the spread grows or shrinks the shadow before any of that is applied.
Spread is the one most people never touch, and it is what separates a tight modern shadow from a puffy one. A negative spread pulls the shadow in tighter than the element, which gives a subtle lift that does not bleed out around the edges. The [msm_tool slug="box-shadow"] exposes all four along with the opacity, which is the fifth thing that decides whether a shadow looks like light or like paint.
Why most shadows look wrong
Almost always too much opacity, too little blur, or both.
A real shadow is the absence of light, not a layer of black. Pure black at 50% opacity on a white background produces a grey rectangle that reads as a graphic element rather than as depth. Start lower than feels right — ten to fifteen percent — and increase the blur until the edge stops being a line.
The second common fault is tinting. A shadow on a coloured surface picks up that surface's hue in reality, and a pure black shadow on a warm background looks slightly dead. Shifting the shadow colour toward the background's hue, or toward a deep blue on a neutral page, reads as more natural than black at the same opacity.
One light source for the whole page
If one element casts its shadow down and to the right, every other element should too. Mixed directions are the fastest way to make an interface look assembled from parts by different people.
Most interfaces settle on a light source directly above, meaning zero horizontal offset and a positive vertical one. It is the least distracting choice and it scales cleanly: to make something look higher off the page, increase the vertical offset and the blur together rather than adding a horizontal shift.
Elevation is a scale, not a value
Rather than choosing a shadow per component, define three or four and use them consistently. A common set:
- Resting — a very small offset and blur, for cards and inputs that sit on the page.
- Raised — larger, for elements that have been hovered or focused.
- Floating — larger again, for dropdowns and popovers that overlay content.
- Modal — largest, for dialogs that sit above everything.
Larger elements need larger, softer shadows. A card lifted off the page carries a bigger blur than a button at the same conceptual elevation, and scaling blur and offset together with the size of the thing is what makes the levels read as consistent rather than arbitrary.
Two shadows beat one
The property takes a comma-separated list, painted back to front, and this is where the convincing results come from.
Real objects cast two distinguishable shadows: a tight dark one where the object nearly touches the surface, and a wide faint one from ambient light. One tight shadow with a small offset and low blur, plus one wide shadow with a larger offset and much larger blur at a lower opacity, looks considerably more like depth than either alone. Nearly every well-regarded design system does this.
inset, and what it is for
The inset keyword moves the shadow inside the element. That is how pressed buttons, recessed panels and inner glows are drawn, and it is also the honest way to show a form field as sunken rather than raised.
A note on pressed states: an inset shadow alone is a weak signal. Pair it with a small downward shift of the content, or a background change, so the state is not carried by a single soft edge.
Performance
Small shadows on a handful of elements cost nothing worth measuring. Two things do cost:
- Large blurs on many elements. The cost grows with the blur radius and the number of elements repainting. A long list where every row carries a heavy shadow will feel less smooth than the same list without.
- Animating the shadow itself. Transitioning
box-shadow forces a repaint on every frame. The usual technique is to put the larger shadow on a pseudo-element and transition its opacity, which the browser can handle on the compositor without repainting.
When not to use one
A shadow's job is to say that something sits above the surface. If everything on a page has one, nothing does — the hierarchy flattens and the page reads as noisy.
Borders, background changes and spacing often separate elements more clearly and more cheaply. Reserve shadows for the things that genuinely are floating: menus, dialogs, sticky headers, and cards you want to read as pickable.