Skip to content

Elevation

Create visual hierarchy by separating content layers of different depth Elevations can be used in such elements as floating buttons and controls, hover over tooltips, listboxes and modal panels.

 

elevation-0
elevation-100
elevation-200
elevation-300
elevation-400

Principles

elevation-do
Higher elevation should always be displayed on top of lower elevation.
elevation-dont
Avoid elevation if it does not add useful visual information or creates clutter. Here the button has elevation for no good reason.