Materialize CSS Shadow

The Materialize CSS shadow effect is used to provide shadow effects to a specific container. Basically, it displays the elements too close or raised the element. There are mainly five predefined Materialize shadow classes, which start from class="z-depth-1" to class="z-depth-5".

Example

1

2

3

4

5

6

The followings are the list of Materialize shadow classes.

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

How To Create Shadow In Materialize ?

Materialize shadow provides different special classes that are used to create shadow effect of the existing container i.e. card with shadow. These classes are .z-depth-0,.z-depth-1,.z-depth-2,.z-depth-3,.z-depth-0,.z-depth-5.Please keep in mind that .z-depth-0 is used to remove the shadow of the elements having z-depth by default.

General Syntax

      <div class="card-panel z-depth-1"></div>
    
Try it now

Source Code

          <div class="container">
  <div class="card-panel">
    <p><b>Learn</b> HTML5</p>
  </div>
  <div class="card-panel z-depth-1">
    <p><b>Learn</b> CSS3</p>
  </div>
</div>
        
Try it now

Source Code: Output

Learn HTML5

Learn CSS3

Web Tutorials

Materialize CSS Shadow
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4