Shadow elevation

Shadow elevation

Elevation is how far an element seems to sit above the surface below it. In the example, the low card has a small, tight shadow, while the high card has a larger, softer one.

Higher elements cast shadows that are bigger, blurrier and further offset. That is how people read which surface is on top.

Most design systems define a few elevation levels. Cards sit low, menus and popovers sit higher, and dialogs sit highest, because they appear above everything else.