Understanding box-shadow
Five numbers. A whole light source.
What x, y, blur, spread and colour each do — and why stacking shadows is what separates "ok" from "really nice".
The five values.
A CSS box-shadow takes up to five numbers and a colour: horizontal offset, vertical offset, blur radius, spread radius, colour. Positive offsets push the shadow down and right; negative ones up and left. Blur softens the edge over the given distance. Spread grows or shrinks the shadow uniformly before blurring. Add the keyword inset and the shadow lives inside the box, not outside.
box-shadow: x y blur spread color
Light has a direction.
The convention on the web is that light comes from above, so the y-offset is almost always positive and larger than x. UI that sets x to zero and y to a few pixels reads as "lit from directly overhead" — calm, neutral, the default for buttons and cards. Side-lighting (large positive x) reads as dramatic and is rarer in interface work. If your shadow direction differs across components, the eye notices and the page feels unsettled.
Soft + sharp = depth.
One shadow looks flat. Two shadows — a sharp tight one for the contact line, a wider soft one for the ambient halo — feel like a real object on a real surface. Material Design, iOS, the Apple Human Interface Guidelines and almost every modern design system stack shadows for this reason. Reach for the soft layer first; it does most of the work. Add the tighter layer only when the element should look like it's touching the surface.
Spread is a sneaky control.
Spread is the radius added to the shadow before it blurs. A positive spread grows the shadow outward; a negative spread shrinks it back inside the box's outline. Shrinking is underrated — a small negative spread combined with a positive y-offset produces the long thin shadow underneath floating buttons that nothing else really achieves. Without it, you'd need a separate element behind the button.
Inset shadows.
Add the keyword inset and the shadow draws on the inside of the box. Use it for pressed-button states, recessed inputs, the inside of a fake hole. Inset shadows can be paired with outer ones in the same property to combine the two — a card with a soft halo outside and a thin gradient lift on the inside reads as glass.
Performance and accessibility.
A handful of static shadows are free. Dozens of animated ones, each with a large blur radius, can tank scroll performance — the browser repaints the blurred area every frame. Cap your blur radius, prefer transforms over animating shadow values, and lean on filter-based fallbacks for very heavy effects. And remember that shadows interact with reduced-motion and dark-mode preferences: a shadow that looks lovely on white may disappear or harden against a dark background, so pick colours with alpha that adapt to either.
Read next