In the real-world, nothing is perfectly flat. A page of paper on a desk has subtle shadow that indicates depth. We are attempting to model that in our interface. Layers live on different planes that casts a shadow that matches the depth of the layer.

Elevation Sizes

We have five different levels of elevation, starting at Base which is the default level and grows in depth as the layer moves off the page.

Elevation Axis

If we model these on an axis, the height of each level becomes clearer.

CSS Classes

// Shadows and Border
.elevation-0 : Base
.elevation-1 : Flat
.elevation-2 : Raised
.elevation-3 : Hovering
.elevation-4 : Floating

// Shadows Only
.shadow-0 : Base, Flat
.shadow-1 : Raised
.shadow-2 : Hovering
.shadow-3 : Floating