Why donate
API Explorer
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 on top
inset-shadow-downSet an inset shadow on bottom
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