Elevation
层级
Aliases:层级投影层级阴影层级海拔z-depthelevationshadow level
What is it
Shadow depth expresses how far an element sits from the page: 0 rests flat, 1–2 lift, 3 and above become overlays. Each shadow stacks umbra, penumbra and ambient layers — higher levels mean larger, softer casts. Use elevation to describe stacking relations, never as ornament.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Cards, menus and popovers need a perceivable stacking order
- Clickable blocks must suggest they float above the page
- Modals and sticky bars need a higher level than content
✕ When not to use
- Flat or neobrutalist languages where shadows clash
- High levels everywhere — inflation destroys the signal
- Shadows used instead of rules or whitespace to divide regions
Variants
Material 2-layer
双层材质投影
Umbra plus penumbra — clear levels 0–5
Flat border-only
扁平描边
No shadow — 1px borders and surface tints
Soft ambient
柔和环境投影
One large, faint cast — airy and light
Implementation
box-shadowenv(safe-area-inset-*)z-indexTokenise the levels: --elev-0: none; --elev-1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.12); each step spreads wider and lighter. Shadows barely read on dark surfaces — switch to brighter borders or lighter surface tints. Pair overlays with a z-index ladder and keep edge-docked layers clear of gestures via env(safe-area-inset-*).
Platform API
box-shadowenv(safe-area-inset-*)z-indexIn code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| CSS | box-shadow |
| Material Design | Elevation |
| Tailwind CSS | shadow-sm / shadow-md / shadow-xl |
Related concepts
Colour variables named by purpose, not hue: bg, surface, text, muted, accent, danger. Components consume roles only, so a theme switch re-points the mapping layer instead of touching components. Light, dark, high-contrast and brand skins are simply different value tables over the same roles.
FoundationUsed with
A visual language that expresses floating layers as frosted glass: a blurred backdrop (backdrop-filter), a low-opacity fill and a thin white rim of light. Panels literally reveal the vivid background beneath them, so the style is about depth — it only works over rich, colorful content worth revealing.
StylesUsed withOn hover, a card or button lifts slightly (translateY -2–6px) while its shadow deepens — as if raised by an invisible hand. The most common desktop affordance for "this is clickable": nearly free, instantly adds depth and life.
MotionUsed with