CSS Shadows (Elevation)     

Simple yet effective way to add shadows to create a depth/elevation effect.
The shadows are in accordance to Material Design specifications (24 levels of depth).

Don’t forget to check the demo.

CSS Class NameDescription
no-shadowRemove any shadow
inset-shadowSet an inset shadow
shadow-1Set a depth of 1
shadow-2Set a depth of 2
shadow-NWhere N is an integer from 1 to 24.
shadow-transitionApply a CSS transition on the shadow; best use in conjunction with hoverable classes

Example:

<div class="shadow-1">...</div>

The shadows above point towards the bottom of the element. If you want them to point towards the top of the element, add up before the number:

CSS Class NameDescription
shadow-up-1Set a depth of 1
shadow-up-2Set a depth of 2
shadow-up-NWhere N is an integer from 1 to 24.