Elevation refers to the relative position of an onscreen element along the z-axis of an interface.
In a two-dimensional environment, such as the web browser, horizontal positioning (x-axis) and vertical positioning (y-axis) are clearly and naturally depicted while elevation, or depth, is only implied through graphical effects.
Elevation values represent the relative distance from the page surface.
Well implemented elevation can help convey visual affordance, offer visual clarity when layering UI elements, and cue the user to an element’s relationship to the current page and other elements on the page
Elevation can also help suggest:
Elevation is determined by two governing factors: the element's implied distance from the elements beneath it and visual affordance.
Implied depth helps a user discern how the element spatially relates to the page.
Compared to a card, a tooltip exists higher within the z-index "stack".
Visual affordance may be throttled based on context and whether the user has triggered the element to appear.
Our elevation scale is fluid, but we've identified five stops spanning a likely range of depth. This simplifies implementation for both designers and engineers.
| Value | Usage | Components |
|---|---|---|
| 2dp | Visible, on-page elements—ideally existing semi-independant of main page content | Cards |
| 4dp | UI that has fixed or persistent positioning within the viewport | Toasts, Sticky elements |
| 8dp | Toggleable elements, content, or interactive states triggered by user action | Menus, Tooltips, Select Dropdowns |
| 16dp | Elements that effectively interrupt a user’s experience—used for urgent or high priority actions | Drawers, Trays |
| 24dp | No specific role | Undefined |
Do not remove or alter shadows based on backdrop.
Do not use shadow/elevation for visual effect.