CSS box-shadow: syntax and realistic examples
box-shadow takes offset-x, offset-y, blur, spread and color. The difference between amateur and polished shadows is layering several soft ones instead of one heavy one.
The syntax
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) — reads as: no horizontal offset, 4px down, 8px of blur, 15%-opacity black. An optional fourth length (spread) grows or shrinks the shadow before blurring; 'inset' flips it inside the element.
Copy-paste examples
| Effect | CSS |
|---|---|
| Subtle card | 0 1px 3px rgba(0,0,0,0.12) |
| Raised card | 0 4px 12px rgba(0,0,0,0.15) |
| Floating modal | 0 16px 48px rgba(0,0,0,0.25) |
| Smooth layered | 0 1px 2px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07), 0 16px 32px rgba(0,0,0,0.07) |
| Inner shadow | inset 0 2px 4px rgba(0,0,0,0.1) |
Why layered shadows look better
Real shadows have a sharp core and a soft spill. Stacking two or three shadows at increasing blur and distance mimics that falloff — each layer stays subtle, but together they read as depth instead of a gray smudge. Keep opacity low (5–10% per layer) and never use pure black on colored backgrounds; tint the shadow toward the background hue.
Tools used in this guide
Related guides
CSS box-shadow: syntax and realistic examples — FAQ
In order: horizontal offset, vertical offset, blur radius, optional spread, then color. 0 4px 8px rgba(0,0,0,.15) = 4px down, 8px blur, 15% black.