Elevation

Elevation is the relative distance between two surfaces along the z-axis.

Component elevation values
1. Nav drawer: 16dp
2. App bar: 4dp
3. Card: 1dp to 8dp
4. FAB: 6dp
5. Button: 2dp to 8dp
6. Dialog: 24dp

Elevation in Material Design

Measuring elevation

Elevation in Material Design is measured as the distance between Material surfaces. The distance from the front of one Material surface to the front of...

Elevation in Material Design is measured as the distance between Material surfaces. The distance from the front of one Material surface to the front of another is measured along the z-axis in density-independent pixels (dps) and depicted (by default) using shadows

1. One surface at 1dp elevation and another surface at 8dp elevation, as viewed from the front
2. The difference in elevation between the two surfaces is 7dp, as viewed from the side
Surfaces at the same elevation can appear differently when other surfaces are behind them.

1. Both surfaces A and B are at the same 8dp elevation. They cast different shadows because Surface B is in front of another surface (C) that already has elevation.
2. Elevation differences between surfaces (A), (B), and (C), as viewed from the side.

The elevation system

All Material Design surfaces, and components, have elevation values. Surfaces at different elevations do the following: Elevation can be depicted using shadows or other visual...

All Material Design surfaces, and components, have elevation values.

Surfaces at different elevations do the following:

  • Allow surfaces to move in front of and behind other surfaces, such as content scrolling behind app bars
  • Reflect spatial relationships, such as how a floating action button’s shadow indicates it is separate from a card collection
  • Focus attention on the highest elevation, such as a dialog temporarily appearing in front of other surfaces

Elevation can be depicted using shadows or other visual cues, such as surface fills or opacities.

Material Design displays elevation using shadows.
CautionDifferent surface fills can be used to express elevation instead of shadows.
CautionOpacity can be used to express elevation instead of shadows.

Resting elevation

Resting elevations are starting elevation values given to components by default. Components move from resting elevations in response to the user or a system event....

Resting elevations are starting elevation values given to components by default. Components move from resting elevations in response to the user or a system event. All Material components have resting elevations that are the same for each type of component. For example, all cards have the same resting elevations as each other, and a dialog has the same resting elevation as other dialogs.

Resting elevation and environment

Resting elevations vary based on the environment, platform, or app. The resting elevations on mobile are designed to provide visual cues, like shadows, to indicate when components are interactive. In contrast, resting elevations on desktop are shallower because other cues, like hover states, communicate when a component is interactive. For example, cards at 0dp elevation on desktop are outlined with a stroke.

1. Resting elevations on mobile for an app bar (A), cards (B), and a floating action button (C), as viewed from the front
2. The same components, as viewed from the side
1. Resting elevations on desktop for an app bar (A), floating action button (B), and cards (C), as viewed from the front
2. The same components, as viewed from the side

Changing elevation

Components can change elevation in response to user input or system events. When this happens, components move to preset dynamic elevation offsets, which are the...

Components can change elevation in response to user input or system events. When this happens, components move to preset dynamic elevation offsets, which are the default elevations components move to when not resting.

Dynamic elevation offsets are the same across each type of component. For example, all cards use the same offset as other cards, and all floating action buttons use the same offset as other floating action buttons.

Once the user input (or system event) is completed or cancelled, the component swiftly returns to its resting elevation.

Some components respond to user input with increases in elevation.
1. Upon user input, this button increases its elevation from 2dp to 8dp
2. The same component, as viewed from the side

Elevation interference

When a component moves between its resting elevation and dynamic elevation offset, it shouldn't collide with other components. To avoid these kinds of collisions, components...

When a component moves between its resting elevation and dynamic elevation offset, it shouldn't collide with other components.

To avoid these kinds of collisions, components can move out of the way. For example, if increasing a card's elevation positions it to pass through a floating action button, that button can disappear or move off-screen before the collision occurs.

You can also design your app's layout to avoid collisions, such as placing a floating action button beside cards, instead of directly above them.

Temporarily reposition or remove components which might collide with transitioning components. Front (1) and side (2) views of a card stream on a mobile device, demonstrating how a floating action button (B) disappears when a card (A) is picked up.
Design your app to minimize opportunities for elevation-based interference.

Depicting elevation

To successfully depict elevation, a surface must show:

  1. Surface edges, contrasting the surface from its surroundings
  2. Overlap with other surfaces, either at rest or in motion
  3. Distance from other surfaces

Surface edges

Edges help to express the tactile quality of Material surfaces. They show where one surface ends and another begins by separating different parts of a...

Edges help to express the tactile quality of Material surfaces. They show where one surface ends and another begins by separating different parts of a UI into identifiable components. For example, the edges of an app bar show that it is separate from a grid list, communicating to the user that the grid list scrolls independently of the app bar.

By default, Material surfaces use shadows to indicate edges. Other methods can be used to indicate edges, such as:

  • Giving surfaces different colors
  • Giving surfaces different opacities

Edges must create sufficient contrast between surfaces (by meeting or exceeding accessible contrast ratios) for them to be seen as separate from one another.

Without showing edges, it’s unclear if this image contains one or more surfaces.
Contrasting surface fills provide enough contrast to make it clear that this image has two surfaces.

Surface overlap

When a surface overlaps another surface, either partially or completely, it indicates that the two surfaces occupy different elevations (but not the degree, or amount,...

When a surface overlaps another surface, either partially or completely, it indicates that the two surfaces occupy different elevations (but not the degree, or amount, of difference between them). Surfaces at higher elevations appear in front of those at lower elevations, meaning they are positioned at different elevations along the z-axis. Surfaces may overlap one another by default, or become overlapped as a result of motion that changes their position in the UI.

When surfaces have different opacities or insufficient contrast from one another, it can make it difficult to tell which surface is in front of another. Avoid ambiguous overlap by ensuring surface edges are clearly defined.

1. Shadows show surface edges, surface overlap, and the degree of elevation.
2. Different surface colors show surface edges and overlap, but not the degree of elevation.
3. Opacity shows surface edges and overlap, but not the degree of elevation.
DoThe top app bar overlaps the cards, indicating it is in front of the cards. This overlap doesn’t express the degree of elevation between the surfaces.
Don'tWithout visual cues of surface edges and overlap, it’s not possible to determine how many surfaces are present, which surfaces are above the others, nor the degree of elevation between surfaces.

Distance

The degree of elevation difference between surfaces can be expressed using scrimmed backgrounds, or using shadows.

The degree of elevation difference between surfaces can be expressed using scrimmed backgrounds, or using shadows.

Scrimmed backgrounds

When the background is scrimmed in a UI, it expresses that the content above it is at a higher elevation. Scrimmed backgrounds express large, but unspecified, amounts of elevation.

DoA scrimmed background can indicate surface overlap, but not the degree of elevation.
Don'tThe lack of shadows or scrimmed background makes it difficult to distinguish the dialog box from the background.

Shadows

Shadows can express the degree of elevation between surfaces in ways that other techniques cannot.

Both a shadow’s size and amount of softness or diffusion express the degree of distance between two surfaces. For example, a surface with a shadow that is small and sharp indicates a surface’s close proximity to the surface behind it. Larger, softer shadows express more distance.

Subtle differences in shadow size and diffusion communicate:

  • A detailed degree of distance between two surfaces
  • Elevation differences between non-overlapping surfaces
Shadows show the edges of a surface and its degree of elevation against the background. They also make differences in surface elevations perceptible between non-overlapping surfaces.
DoShadows make differences in surface elevation perceptible. The smaller, sharper shadow of the app bar (1) indicates it is at a lower elevation than the menu (2), which has a larger, softer shadow.
Don'tThe lack of shadows or other visual cues to indicate edges and surface overlap creates insufficient contrast between surfaces. As a result, it’s difficult to understand which pieces of this UI are grouped together.
Don'tDon’t use shadows for style only.

Motion and elevation

Motion can emphasize elevation using the following methods: Changes in shadow size and softness emphasize changes in elevation. A surface may overlap another upon animation,...

Motion can emphasize elevation using the following methods:

  • Changes in shadows
  • Displaying overlap
  • Pushing
  • Scaling
  • Parallax

Changes in shadows

Changes in shadow size and softness emphasize changes in elevation.

The shadow grows to emphasize the card is rising.

Displaying overlap

A surface may overlap another upon animation, either partially or completely, showing which surface is in front of the other.

As it expands, a surface may show elevation by overlapping nearby surfaces.

Pushing

Surfaces that share the same elevation can move surfaces in their path.

A selected list item expands, pushing surrounding items away.

Scaling

Scaling the size of a surface up or down can emphasize elevation changes.

Foreground and background surfaces scale up and down to emphasize elevation changes.

Parallax

Multiple surfaces at different elevations that move at different speeds can create a sense of depth and place focus on foreground content.

The foreground surface moves faster than the background image, creating a sense of depth.

Combining motion techniques

Elevation can be emphasized through a combination of motion techniques.

Parallax motion and scaling emphasize which surfaces are in front of others.

Elevation hierarchy

Content relates to other content depending on whether they are at similar or different elevations.

Content at different elevations

Surfaces in front of other surfaces typically:

Surfaces in front of other surfaces typically:

  1. Contain more important content
  2. Focus attention, such as a dialog
  3. Control the surfaces behind it, such as actions in an app bar
Front (1) and side (2) views of a desktop interface demonstrate how more important content that is of primary focus (B) appears in front of content that is of secondary focus, like footnotes (A).
Front (1) and side (2) views of a mobile interface demonstrate how placing content on a higher surface, like a bottom sheet (A), can focus attention while maintaining context.
Front (1) and side (2) views of a mobile interface demonstrate how content on a lower surface (A) is usually controlled by the surface in front of it, such as a navigation drawer (B).

Content on coplanar surfaces

Positioning surfaces at the same elevation makes them coplanar, and may indicate they contain content of equal importance as one another. For example, all cards...

Positioning surfaces at the same elevation makes them coplanar, and may indicate they contain content of equal importance as one another. For example, all cards in a collection have equal importance.

1. Cards (A, B), as viewed from the front, have the same elevation and move together, reinforcing that their content has similar hierarchy
2. The same components, as viewed from the side

Surfaces that don't express elevation can appear coplanar. For surfaces that don't express elevation, you can communicate hierarchy differences through their content and by adjusting their horizontal and vertical layout position to suggest their relative hierarchy levels.

For example, on a dashboard with coplanar surfaces, detail content is placed next to parent content, based on the direction a language's text is displayed.

1. A desktop UI, as viewed from the front, demonstrates how the left-to-right positioning of surfaces at the same elevation (A, B, C) communicates hierarchy based on English language content.
2. The same components, as viewed from the side

Default elevations

All elements have default values for resting elevation and dynamic elevation offsets. Certain components are positioned at higher elevations than others, establishing a consistent elevation order across all components. For example, dialogs always appear in front of all other components.

The following table lists default values for resting elevation and dynamic elevation offsets.

Table of default elevation values

Component Default elevation values (dp) Dialog 24 Modal bottom sheet Modal side sheet 16 Navigation drawer 16 Floating action button (FAB - pressed) 12 Standard...

Component Default elevation values (dp)
Dialog 24
Modal bottom sheet Modal side sheet 16
Navigation drawer 16
Floating action button (FAB - pressed) 12
Standard bottom sheet Standard side sheet 8
Bottom navigation bar 8
Bottom app bar 8
Menus and sub menus 8
Card (when picked up) 8
Contained button (pressed state) 8
Floating action button (FAB - resting elevation) Snackbar 6
Top app bar (scrolled state) 4
Top app bar (resting elevation) 0 or 4
Refresh indicator Search bar (scrolled state) 3
Contained button (resting elevation) 2
Search bar (resting elevation) 1
Card (resting elevation) 1
Switch 1
Text button 0
Standard side sheet 0

Diagram of default elevation values

Cross-section diagram showing the resting elevation and dynamic elevation offsets for multiple components.

Up next