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.

There are mainly five predefined Materialize shadow classes, from class="z-depth-1" to class class="z-depth-5".

Example

The followings are the list of predefined shadow classes and its description.

#	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

     
      <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

Web Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS