Objects in material design possess similar qualities to objects in the physical world. In the physical world, objects can be stacked or affixed to one another, but cannot pass through each other. Objects cast shadows and reflect light.

Material Design Shadows

Use the .z-depth-X class within your elements to add material design shadow, where X is the elevation index of shadow.

Examples:

Without shadow

.z-depth-1

.z-depth-2

.z-depth-3

.z-depth-4

.z-depth-5

HTML Code:

<p>Without shadow</p>
<div class="box-shadow-demo"></div>
<p>.z-depth-1</p>
<div class="box-shadow-demo z-depth-1"></div>
<p>.z-depth-2</p>
<div class="box-shadow-demo z-depth-2"></div>
<p>.z-depth-3</p>
<div class="box-shadow-demo z-depth-3"></div>
<p>.z-depth-4</p>
<div class="box-shadow-demo z-depth-4"></div>
<p>.z-depth-5</p>
<div class="box-shadow-demo z-depth-5"></div>