Shadow

Shadows create hierarchy between elements along a z-axis on screens. By using different surfaces and shadows, we can direct users to interact with UI elements.

Interface card with shadow demonstrating z-axis elevation.

Ways to depict elevation

Two squares at different elevations showing shadow depth hierarchy.
Shadow
The simplest way to depict elevation is to use shadows. We adjust the shadow level to create different levels of distance.
Digital red square elevated above grey square showing tonal depth contrast.
Tonal difference
We add tonal difference by using different defined colours, components, or surfaces. For example, different status buttons or coloured action cards create separation between surfaces.
White square elevated above grey scrim background showing surface hierarchy.
Scrim
Scrim can be used on overlapping surfaces to create elevation, such as on modals and tutorial screens.

Prioritise the action

Some objects, such as floating buttons, are given higher levels of elevation for added visual priority. We also direct the user’s attention to specific content by disabling other surfaces using scrim.
Alert dialog modal elevated over scrim layer showing content hierarchy.
Do
Use scrim and modal together to make users focus on important information.
Mobile interface showing floating action buttons against cards with shadow elevation.
Don't
Don't forget to add shadows to floating buttons, or they may not stand out among components with applied shadow.