Shadows provide important visual cues about objects’ depth and directional movement. They are the only visual cue indicating the amount of separation between surfaces. An object’s elevation determines the appearance of its shadow. 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>