Skip to main content

Elevation

Shadows are used to give the impression of distance or elevation between surfaces, which adds depth to our designs.

Why do we use elevation?

We use elevation to create a visual distinction between components and visual elements with different spatial relationships.

Each elevation level assigns a three-dimensional appearance to an object, using shadows and blurs to achieve it. The levels of elevation we have created help us differentiate the elevation within the Z-axis at which these components are placed.

Visual representation of squares.

Use elevation to help distinguish overlapping elements

For components which appear on top of other elements of the design, try using elevation to make them more visible.

Use different levels of elevation to create hierarchy

If you have multiple design elements that need to use elevation, try assigning more elevation to the component with most importance. This will help differentiate them and indicate a clear hierarchy for the users.

Visual representation of the difference in hierarchy achieved by using $elevation-04 and $elevation-01.

Use elevation to help distinguish overlapping elements

For components which appear on top of other elements of the design, try using elevation to make them more visible.

Visual representation of an Icon Button floating over a carousel of cards.

Don’t overdo it

Using elevation consistently but sparingly will help your users understand the hierarchy and interaction patterns for the design elements in your product. Using too many elevation tokens in your designs will only diminish the user’s experience.