Sentre
Search…
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.

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

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

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

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

// Some code
Last modified 10mo ago
Copy link
On this page
Usage
Soft shadow
Sample code