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