Dialtone

Box Shadows

Utilities for controlling an element's box shadows.

Variables

CSS VariableOutput
var(--bs-sm) 0 var(--su2) var(--su4) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) / 15%);
var(--bs-md) 0 var(--su2) var(--su8) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) / 25%);
var(--bs-lg) 0 var(--su2) var(--su12) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) / 30%);
var(--bs-xl) 0 var(--su2) var(--su16) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) / 30%);
var(--bs-card) 0 var(--su2) var(--su16) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) / 8%),
0 var(--su2) var(--su4) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) / 4%),
0 var(--su1) var(--su2) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) / 3%);

Classes

ClassOutput
.d-bs-smbox-shadow: var(--br-sm) !important;
.d-bs-mdbox-shadow: var(--br-md) !important;
.d-bs-lgbox-shadow: var(--br-lg) !important;
.d-bs-xlbox-shadow: var(--br-xl) !important;
.d-bs-cardbox-shadow: var(--br-card) !important;
.d-bs-nonebox-shadow: none !important;
.d-bs-unsetbox-shadow: unset !important;

Outer shadow

Use d-bs-{n} to add an outer box shadow to an element.


<div class="d-bs-sm">...</div>
<div class="d-bs-md">...</div>
<div class="d-bs-lg">...</div>
<div class="d-bs-xl">...</div>
<div class="d-bs-card">...</div>

No shadow

Use d-bs-none to remove a box shadow to an element.


<div class="d-bs-none">...</div>

Hover

Use h:d-bs-{n} to change an element's :hover state box shadow.


<div class="d-bs-none h:d-bs-lg">Hover over me</div>

Focus

Use f:d-bs-{n} to change an element's :focus and :focus-within state box shadow.


<div tabindex="0" class="d-bs-none f:d-bs-lg">Click on me</div>

Focus visible

Use fv:d-bs-{n} to change an element's :focus-visible state box shadow [only when focused by keyboard].


<div tabindex="0" class="d-bs-none fv:d-bs-lg">Click on me</div>
Last Updated: