Shadow

PAGES

error_outlineNo results found.

Home
CSS
Shadow

In material design, everything should have a certain z-depth that determines how far raised or close to the page the element is.

z-depth

View
Html

You can easily apply this shadow effect by adding a class="z-depth-2" to an HTML tag. Alternatively you can extend any of these shadows with Sass using @extend .z-depth-2.


  <div class="col s6 m3 l2">
  <p class="z-depth-1">z-depth-1</p>
  </div>
  <div class="col s6 m3 l2">
  <p class="z-depth-2">z-depth-2</p>
  </div>
  <div class="col s6 m3 l2">
  <p class="z-depth-3">z-depth-3</p>
  </div>
  <div class="col s6 m3 l2">
  <p class="z-depth-4">z-depth-4</p>
  </div>
  <div class="col s6 m3 l2">
  <p class="z-depth-5">z-depth-5</p>
  </div>

Elizabeth Elliott
- hello!
- How can we help? We're here for you!
- I am looking for the best admin template.?
- Materialize admin is the responsive materializecss admin template.
- 8:20 a.m.
- Ohh! very nice
- Thank you.
- How can I purchase it?
- 9:00 a.m.
- From ThemeForest.
- Only $24
- Ohh! Thank you.
- I will purchase it for sure.
- Great, Feel free to get in touch on
- https://pixinvent.ticksy.com/
Type here..

Theme Customizer

Customize & Preview in Real Time

Menu Options

Menu Dark

Menu Collapsed

Menu Selection

Square Rounded Normal

Navbar Options

Navbar Dark

Navbar Fixed

FILES

MEMBERS

PAGES

z-depth

Elizabeth Elliott

Mary Adams

Caleb Richards

Caleb Richards

June Lane

Edward Fletcher

Crystal Bates

Nathan Watts

Willard Wood

Ronnie Ellis

Daniel Russell

Sarah Graves

Andrew Hoffman

Camila Lynch

Homepage mockup design

Melissa liked your activity Drinks.

12 new users registered

Tina is attending your activity

Josh is now following you

New order received urgent

System shutdown.

Database overloaded 89%

System error

Production server down.

Theme Customizer

Menu Options

Navbar Options

Footer Options