Skip to content
search icon
Component Status


Elevation is a visual effect that makes an element look like it's floating above the surface (using the z-axis).


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.


  • Do not use elevation on icons.
  • Do not use elevation on text.


There are six elevation effects to choose between: None, Raised, Overlay, Sticky, Temporary nav and Above scrim.

FigmaExternal linkFigma design for elevation effects
Edit this page on GitHub