Materialize CSS
Materialize Shadows
In material design has several special shadow classes to display containers as paper-like cards with shadow, everything should have a certain z-depth. These shadows make texts and images more appealing.

You can easily apply this shadow effect by adding a classes are z-depth-0, z-depth-1, z-depth-2, z-depth-3, z-depth-4 and z-depth-5 to an HTML tag. Finally z-depth-0 can be used to remove shadows from elements that have z-depths by default.

Alternatively you can extend any of these shadows with Sass using @extend .z-depth-1.

<style type="text/css">
.box-demo{ 
	padding:40px 0px; 
	color:#FFF; 
	margin:20px 0px;
 }
</style>

<div class="row center-align">
    
    <div class="col s6 m4 l2">
      	<div class="amber box-demo z-depth-0">
      		<p>z-depth-0</p>
      	</div>
    </div>
    <div class="col s6 m4 l2">
    	<div class="amber box-demo z-depth-1">
      		<p>z-depth-1</p>
        </div>
    </div>
    <div class="col s6 m4 l2">
    	<div class="amber box-demo z-depth-2">
      		<p>z-depth-2</p>
        </div>
    </div>
    <div class="col s6 m4 l2">
      	<div class="amber box-demo z-depth-3">
        	<p>z-depth-3</p>
        </div>
    </div>
    <div class="col s6 m4 l2">
    	<div class="amber box-demo z-depth-4">
      		<p>z-depth-4</p>
      	</div>
    </div>
    <div class="col s6 m4 l2">
    	<div class="amber box-demo z-depth-5">
      		<p>z-depth-5</p>
      	</div>
    </div>

</div>
Output :