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
Last updated
