Elevation System
M3's elevation system combines shadows with a tonal surface tint that increases with elevation, creating depth perception especially effective in dark mode.
6 levelsShadow + Tint
Elevation Preview
0
0dp1
1dp2
3dp3
6dpUnderstanding M3 Elevation
Material Design 3 uses a dual-approach elevation system:
- Shadow: Traditional drop shadows provide depth cues in light mode
- Tonal Tint: A semi-transparent overlay of the primary color is added to elevated surfaces, becoming more visible at higher elevations
- Dark Mode: The tonal tint becomes the primary depth indicator since shadows are less visible on dark backgrounds
The tint opacity increases with elevation level, ranging from 0% (Level 0) to 14% (Level 5).
Interactive Elevation Explorer
Level 0
0dp
Level 1
1dp
Level 2
3dp
Level 3
6dp
Level 4
8dp
Level 5
12dp
Level 2
Navigation bar, menus, elevated buttons (hover)
3dpLight Mode
Level 0
Level 1
Level 2
Level 3
Dark Mode
Level 0
Level 1
Level 2
Level 3
Tonal Tint Reference
As elevation increases, surfaces receive a semi-transparent overlay of the primary color. In dark mode, tonal tint becomes the primary depth cue.
| Level | Shadow | Tint Opacity | Usage | Preview |
|---|---|---|---|---|
| Level 0 | 0dp | 0% | Filled buttons, outlined cards, default surfaces | |
| Level 1 | 1dp | 500% | Elevated cards, bottom app bar, search bar | |
| Level 2 | 3dp | 800% | Navigation bar, menus, elevated buttons (hover) | |
| Level 3 | 6dp | 1100% | FABs, dialogs, snackbars, nav drawers | |
| Level 4 | 8dp | 1200% | Cards (picked up / hover) | |
| Level 5 | 12dp | 1400% | Dragged elements |
Light vs Dark Mode Comparison
Light Mode
Uses shadow for elevation perception
0
1
2
3
Dark Mode
Uses tonal tint + subtle shadow
0
1
2
3
Elevation Levels
Level 0
0dp
Tint: 0%
Elevated Surface
Filled buttons, outlined cards, default surfaces
Level 1
1dp
Tint: 5%
Elevated Surface
Elevated cards, bottom app bar, search bar
Level 2
3dp
Tint: 8%
Elevated Surface
Navigation bar, menus, elevated buttons (hover)
Level 3
6dp
Tint: 11%
Elevated Surface
FABs, dialogs, snackbars, nav drawers
Level 4
8dp
Tint: 12%
Elevated Surface
Cards (picked up / hover)
Level 5
12dp
Tint: 14%
Elevated Surface
Dragged elements
| Level | Elevation | Usage |
|---|---|---|
| Level 0 | 0dp | Filled buttons, outlined cards, default surfaces |
| Level 1 | 1dp | Elevated cards, bottom app bar, search bar |
| Level 2 | 3dp | Navigation bar, menus, elevated buttons (hover) |
| Level 3 | 6dp | FABs, dialogs, snackbars, nav drawers |
| Level 4 | 8dp | Cards (picked up / hover) |
| Level 5 | 12dp | Dragged elements |