Materialize CSS Shadow Effect

Materialize CSS Shadow Effect

Materialize CSS shadow effect is used to create a shadow effect around the specific container. It displays the elements too close to the web page or raised the element.

# Class Description
1 z-depth-0 It removes the shadow of elements and it is the default value of the shadow.
1 z-depth-1 It generates 1px bordered shadow around the container & adds z-depth of 1.
2 z-depth-2 It generates 2px bordered shadow around the container & adds z-depth of 2.
3 z-depth-3 It generates 3px bordered shadow around the container & adds z-depth of 3.
4 z-depth-4 It generates 4px bordered shadow around the container & adds z-depth of 4.
4 z-depth-5 It generates 5px bordered shadow around the container & adds z-depth of 5.

Steps to create Materialize CSS shadow effect.

Simply, assign .z-depth-{0 to 5} class to the HTML element base class.

General Syntax

<element class="z-depth-{0 to 5}"></element>    
Try It Now

Source Code

Download
<div class="container">
 <div class="row">
      <div class="col s12 m4 l2">
        <p class="z-depth-0 shadow-example valign-wrapper">1</p>
      </div>
      <div class="col s12 m4 l2">
        <p class="z-depth-1 shadow-example valign-wrapper">2</p>
      </div>
      <div class="col s12 m4 l2">
        <p class="z-depth-2 shadow-example valign-wrapper">3</p>
      </div>
      <div class="col s12 m4 l2">
        <p class="z-depth-3 shadow-example valign-wrapper">4</p>
      </div>
      <div class="col s12 m4 l2">
        <p class="z-depth-4 shadow-example valign-wrapper">5</p>
      </div>
      <div class="col s12 m4 l2">
        <p class="z-depth-5 shadow-example valign-wrapper">6</p>
      </div>
   </div><!--/row-->
</div><!--/container-->    
Try it yourself

Source Code : Output

1

2

3

4

5

6

Web Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS