# Elevation [Elevation](https://m3.material.io/styles/elevation) is the relative distance between two surfaces along the z-axis. Material's elevation system is deliberately limited to just a handful of levels. This creative constraint means you need to make thoughtful decisions about your UI’s elevation story. ![Diagram showing the five elevation levels and their respective dp values](images/elevation/hero.webp "Material uses six levels of elevation, each with a corresponding dp value. These values are named for their relative distance above the UI’s surface: 0, +1, +2, +3, +4, and +5. An element’s resting state can be on levels 0 to +3, while levels +4 and +5 are reserved for user-interacted states such as hover and dragged.") * [Design article](https://m3.material.io/styles/elevation) * [API Documentation](#api) * [Source code](https://github.com/material-components/material-web/tree/main/elevation) ## Usage Elevation can be set from 0 to 5 using the `--md-elevation-level` CSS custom property. The elevation will automatically fill the nearest `position: relative` element's size and shape. ![A rounded square with a drop shadow beneath it.](images/elevation/usage.webp "A surface with an elevation shadow.") ```html
``` ### Animation Shadows may be animated between levels by adding `transition-duration` and `transition-easing-function` CSS properties. ![A rounded square with a drop shadow beneath it. After a moment, the square lowers into the background and the shadow disappears, then repeats.](images/elevation/usage-animation.gif "Animating between elevations.") ```html
``` ## Accessibility Elevation is a visual component and does not have accessibility concerns. ## Theming Elevation supports [Material theming](../theming/README.md) and can be customized in terms of color. ### Tokens Token | Default value ----------------------------- | ----------------------- `--md-elevation-level` | `0` `--md-elevation-shadow-color` | `--md-sys-color-shadow` * [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-elevation.scss) ### Example ![Image of an elevation surface with a different theme applied](images/elevation/theming.webp "Elevation theming example.") ```html
```