Shadow

In Material Design, every element has a z-depth. The z-depth sets how far the element rises above the page.

To apply a shadow, add a class such as class="z-depth-2" to an HTML tag. In Sass, include the mixin instead of extending the class, as in @include z-depth("2"). To remove the shadow from an element that has a z-depth by default, use z-depth-0.

<div class="row">
  <div class="s12 m4 l3">
    <div class="z-depth-0">0</div>
  </div>
  <div class="s12 m4 l3">
    <div class="z-depth-1">1</div>
  </div>
  <div class="s12 m4 l3">
    <div class="z-depth-2">2</div>
  </div>
  <div class="s12 m4 l3">
    <div class="z-depth-3">3</div>
  </div>
  <div class="s12 m4 l3">
    <div class="z-depth-4">4</div>
  </div>
  <div class="s12 m4 l3">
    <div class="z-depth-5">5</div>
  </div>
</div>

Sass

The build generates the classes from the same map as the mixin, so the two always match. Use the mixin inside component styles. @extend .z-depth-2 across files is not supported.

.my-panel {
  @include z-depth("2");
}

z-depth-1-half adds an in-between level from the same elevation map.

To soften or deepen a level at runtime, override its custom property in your theme. The properties run from --md-sys-elevation-level0 to --md-sys-elevation-level5, plus --md-sys-elevation-level1-half. The classes, the mixin and every component read them.

<style>
  :root { --md-sys-elevation-level1: 0 1px 3px rgb(0 0 0 / 0.3); }
</style>

Stacking order

A shadow does not decide what sits on top. Surfaces that float over the page take their z-index from these properties, listed lowest first. Dialogs, modal sheets, open menus, an open lightbox and open popovers sit in the browser's top layer, above all of them.

Property	Value	Used by
--expressive-z-toolbar	996	A fixed toolbar.
--expressive-z-app-bar	997	A pinned top app bar and a fixed navigation bar.
--expressive-z-modal-rail	998	An expanded navigation rail over the page.
--expressive-z-sheet	1100	A bottom or side sheet opened without showModal().
--expressive-z-lightbox	1200	Nothing. An open lightbox is in the top layer.
--expressive-z-tooltip	2000	Tooltips.
--expressive-z-menu	9999	The docked date and time pickers. Open menus are in the top layer.
--expressive-z-snackbar	10000	Snackbars.
--expressive-z-confetti	10001	The confetti overlay, in browsers without popovers.

<style>
  /* A site banner that should cover the app bar but stay under sheets. */
  :root { --site-banner-z: calc(var(--expressive-z-app-bar) + 1); }
  .site-banner { position: sticky; top: 0; z-index: var(--site-banner-z); }
</style>