Elevation
Elevation is a visual effect that makes an element look like it's floating above the surface (using the z-axis).
Guidelines
The elevation effect is made using shadows to help lift an element into focus --- it is a reference to the physical world. Elements may be stacked on top of each other but can’t pass through each other.
Styles
There are six elevation effects to choose between: None, Raised, Overlay, Sticky, Temporary nav and Above scrim.
None
Fill
rgba(255, 255, 255, 1.0)
Shadow
0.0px 0.0px 1.0px 0px rgba(0, 0, 0, 0.14)
Add notes
Raised
Fill
rgba(255, 255, 255, 1.0)
Shadow
0.0px 1.0px 5.0px 0px rgba(0, 0, 0, 0.2),0.0px 3.0px 4.0px 0px rgba(0, 0, 0, 0.12),0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.14)
Add notes
Overlay
Fill
rgba(255, 255, 255, 1.0)
Shadow
0.0px 1.0px 10.0px 0px rgba(0, 0, 0, 0.2),0.0px 4.0px 5.0px 0px rgba(0, 0, 0, 0.12),0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.14)
Add notes
Sticky
Fill
rgba(255, 255, 255, 1.0)
Shadow
0.0px 4.0px 5.0px 0px rgba(0, 0, 0, 0.2),0.0px 3.0px 14.0px 0px rgba(0, 0, 0, 0.12),0.0px 8.0px 10.0px 0px rgba(0, 0, 0, 0.14)
Add notes
Temporary Nav
Fill
rgba(255, 255, 255, 1.0)
Shadow
0.0px 7.0px 8.0px 0px rgba(0, 0, 0, 0.2),0.0px 5.0px 22.0px 0px rgba(0, 0, 0, 0.12),0.0px 12.0px 17.0px 0px rgba(0, 0, 0, 0.14)
Add notes
Above Scrim
Fill
rgba(255, 255, 255, 1.0)
Shadow
0.0px 11.0px 15.0px 0px rgba(0, 0, 0, 0.2),0.0px 9.0px 46.0px 0px rgba(0, 0, 0, 0.12),0.0px 24.0px 38.0px 0px rgba(0, 0, 0, 0.14)
Add notes
Design
When expanded use tab to review current page headings and press enter or space to navigate to the selected section
DESIGN TOKENS
Elevation
Elevation is a visual effect that makes an element look like it's floating above the surface (using the z-axis).
Figma
How to add
-
Locate the layer in the Layers Panel that needs elevation applied.
-
Locate the Design tab in the Inspector Panel.
-
Under the Effects section, open the Style library menu to view the elevation styles.
-
Choose a style by clicking on the elevation needed.