Elevation and shadows usage

Each element has it's own elevation and shadow. The elevation and shadows are described here.

Shadow / elevation

Elevation (px) Class Component Example
24 .z24

Dialog

Picker

16 .z16

Nav drawer (sidenav)

Right drawer

Modal bottom sheet

12 .z12

Floating action button (FAB - pressed)

9 .z9

Sub menu

8 .z8

Menu

Card (picked up state)

Raised button (pressed state)

6 .z6

Floating action button (FAB - resting elevation)

Snackbar

4 .z4

App Bar

3 .z3

Refresh indicator

Quick entry / Search bar (scrolled state)

2 .z2

Card (resting elevation)

Raised button (resting elevation)

Quick entry / Search bar (resting elevation)

Chips (contact chip hovered and pressed)

1 .z1

Switch

0 .z0 Will remove shadow

Resources