Materialize CSS Shadow

Materialize CSS shadow effect is used to provide shadow effects to the specific container.

How To Use Materialize CSS Shadow ?

Materialize CSS 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

Materialize CSS Shadow

How To Use Materialize CSS Shadow ?

Web Tutorials