The idea in plain language
A Box shadow A CSS property that draws one or more shadows around an element’s box, defined by horizontal and vertical offset, blur radius, spread and colour. Layering several soft, low-opacity shadows usually looks more natural than a single dark one. See the glossary paints a blurred copy of an element’s box behind it, shifted to suggest light coming from above. It follows the element’s border-radius, never changes the layout of the page, and can be stacked: a comma-separated list of shadows is painted front to back, the first one on top.
Reading a shadow value
box-shadow: 0px 8px 16px 0px rgba(15, 23, 42, 0.1);
/* x y blur spread colour */| Part | What it does | Typical value |
|---|---|---|
| x offset | Moves the shadow right (positive) or left | 0 for light from above |
| y offset | Moves it down (positive) or up | 2–32px |
| blur radius | How soft the edge is; larger is softer | about twice the y offset |
| spread | Grows or shrinks the shadow before blurring | 0, or negative to tuck it in |
| colour | Usually a dark, low-opacity tint of the background | 0.05–0.2 alpha |
inset (optional) |
Draws the shadow inside the box | pressed buttons, wells |
Worked example: one shadow versus four layers
In our Box Shadow Generator we compared a single shadow with the tool’s smooth-shadow preset: 4 layers, 16px distance, 32px blur, 20% total opacity, colour #0F172A. The single version is one heavy layer:
box-shadow: 0px 16px 32px 0px rgba(15, 23, 42, 0.2);The layered version doubles the offset and blur each step and spreads the opacity across the layers:
box-shadow:
0px 2px 4px 0px rgba(15, 23, 42, 0.1),
0px 4px 8px 0px rgba(15, 23, 42, 0.1),
0px 8px 16px 0px rgba(15, 23, 42, 0.1),
0px 16px 32px 0px rgba(15, 23, 42, 0.1);The small layers give a crisp contact shadow right under the card; the large ones give the soft ambient fade. Together they look like a real object lifted off the page, where the single shadow looks like a grey smudge.
Keeping shadows fast and visible
- Do not animate the shadow itself. Changing
box-shadowon hover repaints the area every frame. Put the bigger shadow on a pseudo-element and animate itsopacity, which the browser can do without repainting. - Keep the edge visible. On a very light background a soft shadow may be the only thing outlining a card or button. If the card is interactive, give it a visible border or background change too – WCAG asks for 3:1 for the parts needed to identify a control.
- Tint shadows to the background. A near-black tint of the page colour looks more natural than pure black.
Common mistakes
- Blur too small for the offset, which makes a hard, cheap-looking edge.
- Pure black at high opacity, which makes interfaces look dirty.
- Shadows as the only cue that something is clickable.
Try it
Open the Box Shadow Generator, switch between one layer and four, change the distance and blur, and watch the edge check. Copy the CSS when it looks right.