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 :

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.