Soft shadow

Use a diffuse shadow to separate a surface from its surroundings.

Live preview Try the effect

DESIGN SYSTEM

Good design
makes content clearer.

Focus on content, hierarchy and thoughtful details.

Explore design

This demo explains the pattern. Adapt the styling and dimensions to your project.

What it is

Use a diffuse shadow to separate a surface from its surroundings. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.

When to use

Cards, floating panels and subtle hierarchy.

Related concepts

A soft shadow has blurred edges; a hard shadow creates a stronger graphic separation.

Describe this effect

Output language

Add a restrained, diffuse shadow beneath the surface to indicate depth without distracting from content.

Generated from the parameters · Add to a plan to edit

References

Specification and implementation reference

Definitions are editorial. Common and descriptive names are not necessarily standardized terms.