Light and shadows

Material surfaces cast shadows when they obstruct light sources.


Light

Light and shadows

In the Material Design environment, virtual lights illuminate the UI. Key lights create sharper, directional shadows, called key shadows. Ambient light appears from all angles...

In the Material Design environment, virtual lights illuminate the UI. Key lights create sharper, directional shadows, called key shadows. Ambient light appears from all angles to create diffused, soft shadows, called ambient shadows.

Shadow cast by a key light
Shadow cast by ambient light
Combined shadow from key and ambient lights
Elements use shadows on dark surfaces, even if they are less visible.


Light sources

Shadows in the Material environment are cast by a key light and ambient light. In Android and iOS development, shadows occur when light sources are...

Shadows in the Material environment are cast by a key light and ambient light. In Android and iOS development, shadows occur when light sources are blocked by Material surfaces at various positions along the z-axis. On the web, shadows are depicted by manipulating the y-axis only. The following example shows a card with an elevation of 6dp.

Don'tShadow cast by key light
Don'tShadow cast by ambient light
DoCombined shadow from key and ambient lights

Shadows

Shadows provide cues about depth, direction of movement, and surface edges. A surface’s shadow is determined by its elevation and relationship to other surfaces.

Usage

Because shadows express the degree of elevation between surfaces, they must be used consistently throughout your product.

Because shadows express the degree of elevation between surfaces, they must be used consistently throughout your product.

Elevation is depicted by consistent use of shadow.
Shadow size reflects elevation. Surfaces at higher elevations have larger shadows, while those at lower elevations have smaller shadows.
CautionIf your product doesn’t use shadows, convey elevation in other ways, such as through parallax motion.
DoThe appearance of a shadow indicates the list item has been picked up and can move in front of its peers during this reorder interaction.

Shadows & Motion

Shadows provide useful cues about a surface’s direction of movement and whether the distance between surfaces is increasing or decreasing.

Shadows provide useful cues about a surface’s direction of movement and whether the distance between surfaces is increasing or decreasing.

When a surface changes shape or scale, but its elevation remains the same, its shadow should not change.

When a surface changes its elevation, its shadow should change.


Research

Material Design conducted 36 interviews with fifteen low-vision participants to better understand how shadows and outlines impact an individual’s ability to identify and interact with a component.

Research findings included:

  • Shadows and outlines are just one of many attributes of an element that impacts a user’s ability to identify it. Other attributes that affect the ability to identify an element include font characteristics, elevation, color, layout among surrounding elements, and context of use.
  • Using shadows and outlines increases the ease and speed of finding a component when scanning pages.
  • Using a shadow or stroke outline around a component improves one’s ability to determine whether or not it can be interacted with.

Up next