Checklist
Shadow checklist
Two layers: lift + contact
- Layer 1: bigger spread, lower opacity for lift.
- Layer 2: tighter spread for contact.
- Avoid heavy blur for hard-edge components.
Crisp multi-layer shadows for UI
Stacked offsets without blur for sharp depth.
Demo
Layered shadow
Depth without blur
box-shadow:
0 14px 34px rgba(15,23,42,0.25),
0 6px 14px rgba(15,23,42,0.16);Patterns
Use cases
Buttons, cards, floating chips
Primary button
Hover lift + inset glow
box-shadow:
0 10px 20px rgba(79,70,229,0.25),
inset 0 0 0 1px rgba(255,255,255,0.12);Floating chip
Two layers, zero blur
box-shadow:
0 16px 30px rgba(0,0,0,0.18),
0 6px 14px rgba(0,0,0,0.22);