Box Shadow

Use the box-shadow utilities to controlling the shadow of an element.

The box-shadow utilities to add or remove the shadow of an element.

.shadow-smbox-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
.shadowbox-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
.shadow-mdbox-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
.shadow-lgbox-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
.shadow-nonebox-shadow: none;

Basic usage

While shadows on components are disabled by default in Bootstrap and can be enabled via $enable-shadows, you can also quickly add or remove a shadow with our box-shadow utility classes. Includes support for .shadow-none and three default sizes (which have associated variables to match).





<div class="shadow-sm ..."></div>
<div class="shadow ..."></div>
<div class="shadow-md ..."></div>
<div class="shadow-lg ..."></div>

Removing the shadow

Use shadow-none to remove an existing box shadow from an element. This is most commonly used to remove a shadow that was applied at a smaller breakpoint.


<div class="shadow-none ..."></div>

Hover state

The utility classes supports hover states, using the following format .shadow-*-hover. For example, use shadow-lg-hover to only apply the shadow-lg utility on hover.