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


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