Shadow

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.

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

Gradient Shadows

Every gradient also comes with its own tinted drop shadow - a box-shadow colored to match the gradient's end color, instead of a flat grey. Two ways to use it:

Combined with the gradient

Add gradient-shadow alongside the matching gradient-45deg-* background class.

<div class="gradient-45deg-purple-pink gradient-shadow" style="height: 70px;"></div>

Standalone

gradient-45deg-<start>-<end>-shadow applies the same tinted shadow on its own, without needing the gradient background class too - handy for a plain card-panel or button that should just glow like a gradient without actually being one.

<div class="card-panel gradient-45deg-purple-pink-shadow">Plain card-panel, purple-pink shadow only</div>

See the full list of 30 gradient names on the Color page - each one has a matching -shadow class.