Shadow
A six-step elevation ramp. Higher steps mean closer to the user — pick by layer, not by taste.
Elevation ramp
Rendered live from the --shadow-* tokens.
shadow-1
shadow-2
shadow-4
shadow-8
shadow-16
shadow-64
Where each step is used
| Token | Use |
|---|---|
--shadow-1 | Resting buttons, inputs |
--shadow-2 | Cards at rest |
--shadow-4 | Raised cards, hover states |
--shadow-8 | Popovers, dropdown menus, tooltips |
--shadow-16 | Dialogs, sheets, the cookie banner |
--shadow-64 | Full-screen overlays and marketing heroes |
Rules of thumb
- Elevation communicates stacking order — a popover (
shadow-8) must sit above the card that opened it (shadow-2). - Apply via
shadow-[var(--shadow-4)]; don't invent new blur/offset combinations. - In dark mode shadows read weaker — components already pair them with borders, so never rely on shadow alone to separate surfaces.