Skip to main content

Box Shadow

Effects

Utilities for controlling the box shadow of an element.

ClassProperties
ob-shadow-light-smbox-shadow: var(--ob-shadow-light-sm)
ob-shadow-lightbox-shadow: var(--ob-shadow-light-base)
ob-shadow-light-mdbox-shadow: var(--ob-shadow-light-md)
ob-shadow-light-lgbox-shadow: var(--ob-shadow-light-lg)
ob-shadow-light-xlbox-shadow: var(--ob-shadow-light-xl)
ob-shadow-light-2xlbox-shadow: var(--ob-shadow-light-2xl)
ob-shadow-dark-smbox-shadow: var(--ob-shadow-dark-sm)
ob-shadow-darkbox-shadow: var(--ob-shadow-dark-base)
ob-shadow-dark-mdbox-shadow: var(--ob-shadow-dark-md)
ob-shadow-dark-lgbox-shadow: var(--ob-shadow-dark-lg)
ob-shadow-dark-xlbox-shadow: var(--ob-shadow-dark-xl)
ob-shadow-dark-2xlbox-shadow: var(--ob-shadow-dark-2xl)
ob-shadow-primary-smbox-shadow: var(--ob-shadow-primary-sm)
ob-shadow-primarybox-shadow: var(--ob-shadow-primary-base)
ob-shadow-primary-mdbox-shadow: var(--ob-shadow-primary-md)
ob-shadow-primary-lgbox-shadow: var(--ob-shadow-primary-lg)
ob-shadow-primary-xlbox-shadow: var(--ob-shadow-primary-xl)
ob-shadow-primary-2xlbox-shadow: var(--ob-shadow-primary-2xl)
ob-shadow-secondary-smbox-shadow: var(--ob-shadow-secondary-sm)
ob-shadow-secondarybox-shadow: var(--ob-shadow-secondary-base)
ob-shadow-secondary-mdbox-shadow: var(--ob-shadow-secondary-md)
ob-shadow-secondary-lgbox-shadow: var(--ob-shadow-secondary-lg)
ob-shadow-secondary-xlbox-shadow: var(--ob-shadow-secondary-xl)
ob-shadow-secondary-2xlbox-shadow: var(--ob-shadow-secondary-2xl)
ob-shadow-light-innerbox-shadow: inset 0 2px 4px 0 hsla(var(--ob-black-h), var(--ob-black-s),var(--ob-black-l), .1)
ob-shadow-light-nonebox-shadow: 0 0 var(--ob-black)
ob-shadow-dark-innerbox-shadow: inset 0 2px 4px 0 hsla(var(--ob-black-h), var(--ob-black-s),var(--ob-black-l), 1)
ob-shadow-dark-nonebox-shadow: 0 0 var(--ob-black)
ob-shadow-primary-innerbox-shadow: inset 0 2px 4px 0 hsla(var(--ob-primary-h), var(--ob-primary-s),var(--ob-primary-l), .5)
ob-shadow-primary-nonebox-shadow: 0 0 var(--ob-primary-500)
ob-shadow-secondary-innerbox-shadow: inset 0 2px 4px 0 hsla(var(--ob-secondary-h), var(--ob-secondary-s),var(--ob-secondary-l), .2)
ob-shadow-secondary-nonebox-shadow: 0 0 var(--ob-secondary-500)