The box-shadow property draws one or more shadows around an element's box. It is how cards lift off the page, buttons feel pressable, and focus rings glow. The syntax looks busy, but it is only a handful of values.
The syntax
box-shadow: offset-x offset-y blur-radius spread-radius color;
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
- offset-x and offset-y move the shadow right and down; negative values move it left and up.
- blur-radius softens the edge. 0 gives a hard edge, and larger values spread and fade it.
- spread-radius (optional) grows or shrinks the shadow before it is blurred.
- color sets the shadow color. Use rgba() or hsla() so you can control opacity.
- inset (optional keyword) draws the shadow inside the element instead of outside.
Layer shadows for realistic depth
One heavy shadow looks flat and dated. Real objects cast a tight, dark contact shadow plus a larger, softer one. Stacking two or three shadows with low opacity reads as natural depth. Separate layers with commas:
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 4px 8px rgba(0, 0, 0, 0.08),
0 12px 24px rgba(0, 0, 0, 0.08);
Useful patterns
- Subtle card: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08)
- Floating panel: 0 10px 30px -10px rgba(0,0,0,0.35). A negative spread keeps the shadow from bleeding out sideways.
- Focus ring: 0 0 0 3px rgba(67,56,202,0.4), a zero-blur shadow that acts like an outline and follows border-radius.
- Inner depth: inset 0 2px 4px rgba(0,0,0,0.1) for pressed buttons and input wells.
- Border without layout shift: 0 0 0 1px rgba(0,0,0,0.1), which adds a line but doesn't change the element's size.
Tips for shadows that look good
- Keep opacity low (roughly 0.05 to 0.2). A bigger blur usually looks better than a darker color.
- Use one consistent light direction across the whole interface.
- Tint shadows toward the background hue instead of pure black for a more natural look.
- Scale the shadow with elevation: higher elements get larger offsets and blur.
Performance and dark-mode traps
Don't animate box-shadow directly
Animating box-shadow forces the browser to repaint on every frame. For smooth hover effects, put the larger shadow on a pseudo-element and animate its opacity, or animate transform instead.
Shadows also barely show on dark backgrounds. In dark themes, convey elevation with a slightly lighter surface color or a subtle border rather than a darker shadow.
A visual generator lets you drag the values, see the result instantly, and copy the finished CSS, which is far faster than tweaking numbers by hand.
Frequently asked questions
What does the 0 in box-shadow: 0 4px 12px mean?
It's the horizontal offset: no shift left or right. The 4px is the vertical offset and 12px is the blur radius.
Can I add multiple box-shadows to one element?
Yes. Separate each shadow with a comma. The first listed shadow is drawn on top.
What is the difference between box-shadow and drop-shadow()?
box-shadow follows the element's rectangular box (and its border-radius). The filter drop-shadow() follows the actual shape of the rendered content, including transparent areas in images.
Does box-shadow affect layout?
No. Shadows don't take up space or push other elements, though they can be clipped by an ancestor with overflow: hidden.
Try it: Box Shadow Generator — free, runs in your browser, nothing is uploaded.
Originally published at ilovekit.app.
