Shadow

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

Basic

You can easily apply this shadow effect by adding a class="z-depth-2" to an HTML tag.

<div class="col s12 m2">
  <p class="z-depth-1">z-depth-1</p>
</div>
<div class="col s12 m2">
  <p class="z-depth-2">z-depth-2</p>
</div>
<div class="col s12 m2">
  <p class="z-depth-3">z-depth-3</p>
</div>
<div class="col s12 m2">
  <p class="z-depth-4">z-depth-4</p>
</div>
<div class="col s12 m2">
  <p class="z-depth-5">z-depth-5</p>
</div>
<div class="col s12 m2">
  <p class="z-depth-6">z-depth-6</p>
</div>

Hover

Also you can use shadow on hover. Just apply this shadow effect by adding a class="z-depth-2-hover" to an HTML tag.

<div class="col s12 m2">
  <p class="z-depth-1-hover">z-depth-1-hover</p>
</div>
<div class="col s12 m2">
  <p class="z-depth-1 z-depth-2-hover">z-depth-2-hover</p>
</div>
<div class="col s12 m2">
  <p class="z-depth-1 z-depth-3-hover">z-depth-3-hover</p>
</div>
<div class="col s12 m2">
  <p class="z-depth-1 z-depth-4-hover">z-depth-4-hover</p>
</div>
<div class="col s12 m2">
  <p class="z-depth-1 z-depth-5-hover">z-depth-5-hover</p>
</div>
<div class="col s12 m2">
  <p class="z-depth-1 z-depth-6-hover">z-depth-6-hover</p>
</div>