back to main Purchase

Box shadows

src/scss/_core/utils/_shadow.scss

Class Description Quick Example
.shadow
.shadow-xs .shadow-sm .shadow-md .shadow-lg .shadow-xlg .shadow-3d .shadow-none
.text-shadow .text-shadow-lg .text-shadow-xl

Box shadows for any block element.

Shadows are defined in main variables.scss
$box-shadow
$box-shadow-xs
$box-shadow-sm
$box-shadow-lg
$box-shadow-xlg

.shadow (default)
.shadow .row-pill
.shadow-xs
.shadow-sm
.shadow-md
.shadow-lg
.shadow-xlg
.shadow-3d
.shadow-md .row-pill
.shadow-hover
.shadow-xs-hover .shadow-sm-hover .shadow-md-hover .shadow-lg-hover .shadow-xlg-hover .shadow-3d-hover

On mouse hover, apply a shadow. You can mix with any shadow (without hover) for a nice effect.

For a nice transition effect, mix with:
.transition-all-ease-150
.transition-all-ease-200
.transition-all-ease-250
.transition-all-ease-500
predefined by _core/utils/_transition.scss

And/or:
.transition-hover-top
.transition-hover-right
.transition-hover-bottom
.transition-hover-left
.shadow-xs .shadow-lg-hover .transition-all-ease-250
.shadow-md .shadow-xlg-hover .transition-all-ease-250
.shadow-md .shadow-3d-hover .transition-all-ease-250
.shadow-md .shadow-3d-hover .transition-hover-top .transition-all-ease-250