In material design, everything should have a certain z-depth that determines how far raised or close to the page the element is.

You can easily apply this shadow effect by adding a class="z-depth-2" to an HTML tag. Alternatively you can extend any of these shadows with Sass using @extend .z-depth-2. A z-depth-0 can be used to remove shadows from elements that have z-depths by default.

Please note that shadows are not visible on dark mode so we use the background color brightness instead.

You can also use .on-dark-z-depth-0 to remove the shadow attribute on dark mode. Please note that this will also not change the background-color.

    <div class="col s12 m2">
      <p class="z-depth-0 ondark-black"></p>
    </div>
    <div class="col s12 m2">
      <p class="z-depth-1"></p>
    </div>
    <div class="col s12 m2">
      <p class="z-depth-1-half"></p>
    </div>
    <div class="col s12 m2">
      <p class="z-depth-2"></p>
    </div>
    <div class="col s12 m2">
      <p class="z-depth-3"></p>
    </div>
    <div class="col s12 m2">
      <p class="z-depth-4"></p>
    </div>
    <div class="col s12 m2">
      <p class="z-depth-5"></p>
    </div>
        

To animate the shadow, you can check the CSS Helpers, Formatting section, Hover.

Colored Shadows

You can append primary, secondary or by semantic purpose like success, info, and others at the end of .z-depth-<depth-level> to change the shadow's color.

    <div class="col s12 m2">
      <p class="z-depth-5-primary grey lighten-2 ondark-grey ondark-darken-2">z-depth-5-primary grey lighten-2 ondark-grey ondark-darken-2</p>
    </div>
    <div class="col s12 m2">
      <p class="z-depth-3-success grey lighten-2 ondark-grey ondark-darken-2">z-depth-3-success grey lighten-2 ondark-grey ondark-darken-2</p>
    </div>