packages/docs/src/pages/en/styles/elevation.md
The elevation helpers control the relative depth between surfaces along the z-axis. Following Material Design 3 guidelines, Vuetify uses 6 elevation levels (0-5). Elevation values are measured in dp (density-independent pixels), a unit that ensures consistent sizing across different screen densities.
<PageFeatures />| Class | Level (dp) | Usage |
|---|---|---|
| elevation-0 | 0dp | No shadow - flat surfaces |
| elevation-1 | 1dp | Cards, buttons (elevated) |
| elevation-2 | 3dp | Menus, rich tooltip, floating app bar |
| elevation-3 | 6dp | Dialogs, snackbars, FABs |
| elevation-4 | 8dp | Dragged elements |
| elevation-5 | 12dp |
In MD3, elevation changes are commonly used to indicate interactive states. For example, a card at rest might use elevation-1, rising to elevation-2 on hover and elevation-3 when pressed or dragged.
The elevation helper classes allow you to assign a custom z-depth to any element.
Use the hover-elevation prop to change a component's elevation on hover. For regular HTML elements or components without elevation prop, the hover-elevation-* utility classes helps achieve the same effect.
::: tip
The hover-elevation-* utility classes do not include a transition. To animate the change, add your own transition styles or use a CSS framework like Tailwind. VCard applies the following transition by default:
transition: 0.28s box-shadow cubic-bezier(0.4, 0, 0.2, 1); /* simplified */
:::
<ExamplesExample file="elevation/prop-dynamic" new-in="4.1.0" />The elevation-overlay class adds a translucent layer whose opacity scales with the elevation level. This is especially useful in dark themes where shadows are less visible — the overlay provides a visual cue for surface depth.
You can customize --v-shadow-color for each theme or use it directly on the component to change the shadow color (expects an RGB value) and --v-elevation-overlay-color to customize the overlay tint.