Box Shadow
A layered shadow effect that creates depth and elevation for an element.
Plain English
Box shadow makes an element look like it is lifted above the page. A subtle shadow on a card makes it feel interactive; a stronger shadow on a modal shows it floats above everything else. The key insight: real shadows are soft and layered, not single sharp drops. The best shadows combine two layers — one tight and dark near the element, one wide and faint spreading outward.
Technical
The box-shadow property accepts one or more comma-separated shadow definitions: offset-x, offset-y, blur-radius, spread-radius, colour. The inset keyword reverses direction. Multiple layers are composited in order, first on top. A box-shadow of 0 on an element does not remove inherited shadows — use box-shadow: none explicitly.
Live Demo
Flat
No elevation — content inside a panel
Soft
Default card at rest — subtle depth
Lifted
Hover state — interactive feedback
Elevated
Modals, popovers — floating above
Elevation should reflect actual hierarchy — reserve the strongest shadow for the topmost layer.
Usage
✓ Good usage
Use a soft two-layer shadow on cards at rest and a lifted shadow on hover to communicate interactivity without animation.
✗ Bad usage
A single hard-black box-shadow (e.g. 0 4px 0 #000) creates an artificial, game-like feel that clashes with most professional UIs.
Recommended values
- Flat (none) — content within a card, no elevation
- Soft — default card or panel, 1–2px offset, 4–12px blur, 4–8% opacity
- Lifted — interactive hover state, 4–10px offset, 16–24px blur
- Elevated — modals, popovers, 10–20px offset, 32–48px blur
Common mistakes
- Using a single-layer shadow — real shadows always soften at the edges.
- Using full black (#000) for the shadow colour — prefer the foreground colour at 6–12% opacity.
- Applying the same elevation to every element — elevation should reflect actual stacking hierarchy.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Apply a soft two-layer box shadow to cards: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.08). Use a lifted shadow on hover.