Shadow

Use elevation-* for new screens. legacy-* shadows match existing screens and are deprecated.

Shadows

Name	Value	Usage
legacy-cardDeprecated	`0 4px 16px 0 rgb(33 33 33 / 0.05)`	Ideal for content containers like cards, panels, or tiles on light backgrounds.
legacy-navbarDeprecated	`0 2px 40px 0 rgb(0 0 0 / 0.12)`	A stronger, more diffused shadow used to distinguish the navigation bar from the page content below it
legacy-auxiliaryDeprecated	`0 4px 8px 0 rgb(0 0 0 / 0.05)`	Shadows used for popup elements that appear on top of others such as modal dialogue and dropdown options
elevation-0	`0 0 0 0 rgb(0 0 0 / 0)`	No shadow. The component sits completely flat on the surface with no perceived depth. Used for backgrounds, dividers, and non-interactive base elements.
elevation-1	`0 4px 6px -1px rgb(0 0 0 / 0.1)0 2px 4px -2px rgb(0 0 0 / 0.06)`	Ideal for cards, list items, and low-priority interactive elements that need minimal separation from the background.
elevation-2	`0 12px 16px -4px rgb(0 0 0 / 0.08)0 4px 6px -2px rgb(0 0 0 / 0.03)0 2px 2px -1px rgb(0 0 0 / 0.04)`	Suitable for raised cards, dropdown menus, and secondary containers.
elevation-3	`0 20px 24px -4px rgb(0 0 0 / 0.08)0 8px 8px -4px rgb(0 0 0 / 0.03)0 3px 3px -1.5px rgb(0 0 0 / 0.04)`	Best used for floating action elements, popovers, and sticky components.
elevation-4	`0 24px 48px -12px rgb(0 0 0 / 0.18)0 4px 4px -2px rgb(0 0 0 / 0.04)`	Recommended for dialogs, side sheets, and components that demand user attention.
elevation-5	`0 32px 64px -12px rgb(0 0 0 / 0.14)0 5px 5px -2.5px rgb(0 0 0 / 0.04)`	Reserved for overlays, modals, and critical UI elements that sit at the very top of the visual stack.