# Shadow

> Raise or flatten an element with the z-depth elevation classes.

## Shadows

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. In Sass, include the mixin rather than extending the class: `@include z-depth("2")`. A `z-depth-0` can be used to remove shadows from elements that have z-depths by default.

0

1

2

3

4

5

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

### Sass

The class list is generated from the same map as the mixin, so they cannot drift. Prefer the mixin inside component styles; `@extend .z-depth-2` across files is not supported.

```
.my-panel {
  @include z-depth("2");
}
```

There is also `z-depth-1-half`, used by some components for an in-between hover elevation.