Layered shadows feel real
A single box-shadow looks flat. Real depth comes from stacking multiple shadows — a tight ambient shadow for contact, a diffuse one for atmosphere. Adjust the layers below to build a production-quality shadow.
Concentric border radius
When nesting rounded rectangles, the inner radius must be smaller than the outer by the gap between them. Otherwise the curves look misaligned — a subtle but immediately noticeable visual error.
Shadow direction matters
Shadows should be consistent across the interface — pick one light source and stick with it. Mixing shadow directions creates a subtle sense of wrongness that users feel but can't articulate.
Two more rules: never use pure black for shadow color (use rgba(0,0,0,0.08)), and match shadow intensity to elevation.
Spacing from a scale, not guesses
Every spacing value should come from a defined scale — typically 4px increments (4, 8, 12, 16, 20, 24, 32, 40, 48, 64). This creates visual rhythm that makes layouts feel cohesive without effort.
Quick reference
| Rule | Value |
|---|---|
| Shadow layers | 2-3 layers (ambient + directional + contact) |
| Shadow color | rgba(0,0,0, 0.04–0.12), never pure black |
| Shadow direction | One consistent light source per interface |
| Border radius nesting | inner = outer - gap |
| Spacing scale | 4px base: 4, 8, 12, 16, 24, 32, 48, 64 |
| Button shadow | 6-layer anatomy for premium feel |
Key takeaways
- Stack 2-3 shadow layers for realistic depth — never one flat shadow
- Never use pure black in shadows — use low-opacity rgba
- Nested border-radius: inner = outer - padding
- All spacing from a 4px scale — no magic numbers
- Consistent shadow direction across the entire interface