Elevation

Elevation is the distance between two surfaces on the z-axis

Overview · Applying elevation · Tokens

Tokens

Elevation levels can be implemented with tokens. Surface tint color is deprecated. Use elevation level tokens (0–5) instead. Learn more about design tokens

Design tokens

Token table

Machine-readable relationship table

Elevation tokens · 1 token set · 7 tokens · live token table · DSDB ELEVATION.20543ce18892f7d9

• Default context: Theme: Light · Platform: Android · Audience: 3P · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default
• Not configurable here (group default used): Motion scheme: Standard · Font: Static · Language height: Small
• Other contexts: Theme: Dark · Contrast: Medium contrast, High contrast. "Other contexts" lists values that differ from the default when only that one context changes.
• Reference chain: aliases from the token to its source value (token → alias → … → value). "—" means the token holds a literal value.

Elevation · md.sys.elevation · 7 tokens

Elevation level tokens

Group	Token	Type	Reference chain	Resolved value	Other contexts
All tokens	md.sys.elevation.surface-tint-color (deprecated)	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
All tokens	md.sys.elevation.level5	Elevation	—	12dp	—
All tokens	md.sys.elevation.level4	Elevation	—	8dp	—
All tokens	md.sys.elevation.level3	Elevation	—	6dp	—
All tokens	md.sys.elevation.level2	Elevation	—	3dp	—
All tokens	md.sys.elevation.level1	Elevation	—	1dp	—
All tokens	md.sys.elevation.level0	Elevation	—	0dp	—

Component elevation

Most components have a default elevation. Component elevation is only used to determine where the component sits in relation to other components, including when hovered or focused (which usually raises elevation by one level). Elevation has no shadow or value of its own by default.

Resting level	Component	DP Height
5	(not assigned as resting level)	12dp
4	(not assigned as resting level)	8dp
3	Date pickers Dialogs (modal) Extended FAB FAB FAB menu (close button) Search Time pickers	6dp
2	App bar (scrolled) Menu Navigation bar Rich tooltip Toolbar	3dp
1	Banner Bottom sheet (modal) Button (elevated) Card (elevated) Chips (elevated) Navigation drawer (modal) Side sheet (modal)	1dp
0	App bar (not scrolled) Buttons (filled, tonal, outlined) Button groups Cards (filled, outlined) Carousel Chips Dialog (full-screen) Extended FAB (in navigation rail) FAB (in navigation rail) FAB menu (list items) Icon buttons List Navigation rail Segmented button Side sheet (docked) Slider Split button Tabs	0dp