Elevation

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 in range from 0 to 24.

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

To add transition between elevation changes (when elevation-$n, and elevation-pressed-$n used together) we can add elevation-transition class to element, it will set 200ms transition duration. To use different duration we can use one of elevation-transition-100, elevation-transition-200, …, classes.

Example