マテリアルデザインではすべてのものに、ページからどの程度盛り上がっているか、あるいはどの程度近いかを決定する特定のz深度がある必要があります。

class="z-depth-2" をHTMLタグに追加することで、この影効果を簡単に適用できます。または、@extend .z-depth-2 を使用して Sass でこれらの影を拡張できます。 z-depth-0 を使用すると、デフォルトでz深度を持つ要素から影を削除できます。

    <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>