Box Shadows

Utilities for controlling an element's box shadows.

Variables

CSS Variable Output
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(--su) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) / 30%);
var(--bs-lg) 0 var(--su2) var(--su) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) / 30%);
var(--bs-xl) 0 var(--su2) var(--su) 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

Class Output
.d-bs-sm box-shadow: var(--br-sm) !important;
.d-bs-md box-shadow: var(--br-md) !important;
.d-bs-lg box-shadow: var(--br-lg) !important;
.d-bs-xl box-shadow: var(--br-xl) !important;
.d-bs-card box-shadow: var(--br-card) !important;
.d-bs-none box-shadow: none !important;
.d-bs-unset box-shadow: unset !important;

Outer shadow

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

No shadow

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