Foundation / Shadows & Blur

Depth & Atmosphere

Establishing hierarchy with shadows and creating immersion with blur.

Elevation (Shadows)

Surface

sm

Subtle emphasis

Surface

md

Card elevation

Surface

lg

Dropdowns & Modals

Surface

xl

Floating Actions

Surface

2xl

Heavy emphasis

Glassmorphism (Blur)

sm 4px blur

md 12px blur

lg 16px blur

xl 24px blur