Shadows

Add or remove shadows to elements with box-shadow utilities.


Example

Shadows are enabled by default in merit UI Kit.

Quickly add or remove a shadow with our box-shadow utility classes.

We provide shadow utility built on top of theme colors-

  • .shadow-{theme-color} for regular theme color shadow
  • .shadow-lg-{theme-color} for large theme color shadow
  • .shadow-xl-{theme-color} for extra large theme color shadow

Also includes support for .shadow-none and three default sizes.

.shadow-none
.shadow
.shadow-lg
.shadow-primary
.shadow-lg-primary
.shadow-xl-secondary

.shadow-none
.shadow
.shadow-lg
.shadow-primary
.shadow-lg-primary
.shadow-xl-secondary