Shadows

Examples#

Quickly add or remove a shadow with the box-shadow utility classes. Includes support for .shadow-none and three default sizes, which use the matching custom properties --shadow-sm, --shadow and --shadow-lg. Shadows are a little stronger in dark mode, so they still read on a dark page.

<div class="shadow-none p-3 mb-5 bg-body-tertiary rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-body-tertiary rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-body-tertiary rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-body-tertiary rounded">Larger shadow</div>

Unlike in Bootstrap, many components already carry a shadow of their own (cards, list groups, dropdowns, modals, toasts). .shadow-none removes it.