Add one of the classes below to apply a shadow effect to HTML element.

No shadow

z-depth-1

z-depth-2

z-depth-3

z-depth-4

z-depth-5

<div class="z-depth-1">

<div class="z-depth-2">

<div class="z-depth-3">

<div class="z-depth-4">

<div class="z-depth-5">

Use class .z-depth-0 to remove exsisting, default shadow of the element

Add class hoverable to any element to achieve shadow hover effect

<img src="example.img" class="hoverable">

* All code examples are taken from the Material design website.