Foundations
Elevation
Six levels of elevation. In Material, depth comes mainly from surface color; shadows are a secondary cue for things that float, like FABs and menus.
Levels
Level 0
Level 1
Level 2
Level 3
Level 4
Level 5
Each level pairs a shadow with a surface role: level 1 with surface-container-low, level 3 with surface-container-high, and so on. Shadows are tinted with the theme's shadow color.
Using elevation
<div className="bg-surface-container-low shadow-elevation-1 hover:shadow-elevation-2" />Prefer a stronger surface over a shadow for static content. Reach for shadows when something moves above the page or needs to stand out on a busy background.