Elevation
The perceived height of a UI element above the base surface, communicated through shadows and background contrast.
Plain English
Elevation is the language of depth in UI design. It answers "what is on top of what?" A floating button hovers above the page. A modal floats above everything. A selected item is subtly raised above its neighbours. Higher elevation = stronger shadow, darker overlay. Getting elevation consistent across an interface makes the UI feel physically coherent — you can sense which elements are active, which are floating, and what the structure is.
Technical
Elevation is typically implemented with a scale of box-shadow values — each stop representing a z-height. Material Design formalised this with dp (density-independent pixels) elevation levels. In practice: 0dp = no shadow (flush), 1dp = soft shadow (cards at rest), 4dp = lifted (hover), 8dp = modal, 24dp = dialogs. Background colour also contributes: elevated surfaces are often 1–4% lighter in light mode. In dark mode, elevation can be shown by lightening the surface colour (since shadows are invisible on dark backgrounds).
Live Demo
Level 0 — Flat
Content within a panel
Level 1 — Soft
Cards at rest
Level 2 — Lifted
Cards on hover, dropdowns
Level 3 — Elevated
Floating panels, modals
Elevation communicates depth: elements higher in the stack should have stronger shadows.
Usage
✓ Good usage
Use a 4-level elevation scale: flat (table rows), soft (cards), lifted (hover state), and floating (modals/dropdowns) — every surface's depth is legible at a glance.
✗ Bad usage
The same shadow on every element from table cells to modals — no depth hierarchy communicates what is "in front."
Recommended values
- Level 0 (flat): no shadow — content within a card, table rows
- Level 1 (soft): 0 1px 3px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.06)
- Level 2 (lifted): 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06)
- Level 3 (elevated): 0 10px 15px -3px rgba(0,0,0,0.1)
- Level 4 (floating): 0 20px 25px -5px rgba(0,0,0,0.1)
- Dark mode: replace shadows with surface background lightening (+5–10% lightness)
Common mistakes
- Too-dark shadows that look hand-drawn rather than natural.
- Skipping elevation in dark mode — surfaces need to lighten (not just desaturate shadows) to show depth.
- Using the same elevation for both cards and modals — they should clearly occupy different planes.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Implement a 4-level elevation scale. Cards at rest: soft shadow. Cards on hover: lifted shadow. Dropdowns and popovers: elevated shadow. Modals: floating shadow. In dark mode, replace shadows with surface background lightening (+6% brightness per elevation level).