Shadows

Meaning and Message

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

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.

Shadow Examples

Elevation for Shadows

Measuring Elevation

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

1. One surface at 1px elevation and another surface at 8px elevation, as viewed from the front.
2. The difference in elevation between the two surfaces is 7px, 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 8px elevation. They cast different shadows because surface B is in front of another surface C that already has an elevation.
2. Elevation differences between surfaces A, B, and C 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 (px)
Top Navigation Bar (resting elevation)	0
Search bar (resting elevation)	0
Text Button	0
Toggle	1
Card	2
Button Filled & Outline (resting elevation)	2
Top Navigation Bar (scrolled state)	4
Standard bottom sheet	8
Footer/Toasts	8
Menus and Sub Menus	8
Button Filled & Outline (pressed state)	8
Floating action button (FAB - pressed)	12
Modals	16
Navigation drawer	16
Dialog (notifications, ?)	24

Diagram of Default Elevation Values

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

Resting Elevation

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

Changing Elevation

Components can change elevation in response to user interaction. When user interaction happens, the components move to preset dynamic elevation offsets, which are the default elevation components move when not resting.

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

Once the user interaction is completed or cancelled, the component swiftly returns to its resting elevation.