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...

Read More

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...

Read More

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’t.

Shadow cast by key light

Don’t.

Shadow cast by ambient light

Do.

Combined 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.

Read More

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.

Caution.

If your product doesn’t use shadows, convey elevation in other ways, such as through parallax motion.

Do.

The 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 an surface’s direction of movement and whether the distance between surfaces is increasing or decreasing.

Read More

Shadows provide useful cues about an 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.