---
url: /styles/elevation/tokens.md
description: Elevation is the distance between two surfaces on the z-axis
---

# Elevation

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

[Overview](overview.md) · [Applying elevation](applying-elevation.md) · **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](../../foundations/design-tokens/overview.md)

::: token-table elevation-20543ce18892f7d9-11aadcad
**Elevation tokens** · 1 token set · 7 tokens · [live token table](https://m3.material.io/styles/elevation/tokens) · 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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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<br>Dialogs (modal)<br>Extended FAB<br>FAB<br>FAB menu (close button)<br>Search<br>Time pickers                                                                                                                                                                                                                                                             | 6dp       |
| 2             | App bar (scrolled)<br>Menu<br>Navigation bar<br>Rich tooltip<br>Toolbar                                                                                                                                                                                                                                                                                                 | 3dp       |
| 1             | Banner<br>Bottom sheet (modal)<br>Button (elevated)<br>Card (elevated)<br>Chips (elevated)<br>Navigation drawer (modal)<br>Side sheet (modal)                                                                                                                                                                                                                           | 1dp       |
| 0             | App bar (not scrolled)<br>Buttons (filled, tonal, outlined)<br>Button groups<br>Cards (filled, outlined)<br>Carousel<br>Chips<br>Dialog (full-screen)<br>Extended FAB (in navigation rail)<br>FAB (in navigation rail)<br>FAB menu (list items)<br>Icon buttons<br>List<br>Navigation rail<br>Segmented button<br>Side sheet (docked)<br>Slider<br>Split button<br>Tabs | 0dp       |