Shadow

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.

Soft shadow

The soft shadow creates a more natural and clean feel to the interface. The default elevation value we use is 4px.

1. Light theme

The opacity (12 - 20%) and the higher level of blur (32 - 40px) - This configuration builds a soft shadow for the light theme.

2. Dark theme

The opacity (32 - 40%) and the higher level of blur (32 - 44px) - This configuration builds a soft shadow for the dark theme.

Sample code

// Some code