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).

Usage

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 the default CSS transition effect on the shadow
Standard shadows

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.
Shadows pointing up
Inset shadow