Shadows provide important visual cues about objects' depth and directional movement. They are the only visual cue indicating the amount of separation between surfaces. An object’s elevation determines the appearance of its shadow. The elevation values are mapped out in a "z-space" and range from 1 to 24.

Elevation can be added to any element by adding `elevation-0`, `elevation-1`, ..., `elevation-24` classes.

To add different elevation only on hover (desktop), you can use `elevation-hover-0`, `elevation-hover-1`, ..., `elevation-hover-24` classes.

To specify elevation only when item pressed, you can use `elevation-pressed-0`, `elevation-pressed-1`, ..., `elevation-pressed-24` classes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
6 + hover-24 + pressed-12