Elevation allows our users to understand the distance that exists between different components or surfaces on the z-axis. This helps to communicate spacial relationships, hierarchy and interaction.
Elevation is represented by using drop shadows, which result from a combination of key and ambient lights. In some cases, such as dialogs or drawers, elevation is emphasized by using a scrim or overlay to block interactions with the content underneath.
https://invis.io/RAXW74H582H#/423500647_Elevation
$elevation-base: 0 0 1px rgba(0, 0, 0, 0.2);
$elevation-low: $elevation-base, 0 2px 4px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.05);
$elevation-medium: $elevation-low, 0 8px 16px rgba(0, 0, 0, 0.05);
$elevation-high: $elevation-medium, 0 12px 24px rgba(0, 0, 0, 0.05);