Shadows
Add or remove shadows to elements with box-shadow utilities.
On this page
Box-shadow styles are referred to as ’elevation’ within the design system.
Examples
You can quickly add or remove a shadow with our box-shadow utility classes. Includes support for .shadow-none and new semantic helpers.
No shadow
Default shadow
Drag shadow
Emphasized shadow
Raised shadow
Sticky default shadow
Sticky emphasized shadow
<div class="shadow-none p-lg mb-4xl bg-secondary">No shadow</div>
<div class="shadow-default p-lg mb-4xl bg-secondary">Default shadow</div>
<div class="shadow-drag p-lg mb-4xl bg-secondary">Drag shadow</div>
<div class="shadow-emphasized p-lg mb-4xl bg-secondary">Emphasized shadow</div>
<div class="shadow-raised p-lg mb-4xl bg-secondary">Raised shadow</div>
<div class="shadow-sticky-default p-lg mb-4xl bg-secondary">Sticky default shadow</div>
<div class="shadow-sticky-emphasized p-lg mb-4xl bg-secondary">Sticky emphasized shadow</div>
<div class="shadow-sticky-navigation-scrolled p-lg mb-4xl bg-secondary">Sticky navigation shadow</div>
Bootstrap
$enable-bootstrap-compatibility: true
This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more
about Bootstrap compatibility.
Includes support for three default sizes (which have associated variables to match).
No shadow
Small shadow
Regular shadow
Larger shadow
<div class="shadow-none p-3 mb-5 bg-body-tertiary">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-body-tertiary">Small shadow</div>
<div class="shadow p-3 mb-5 bg-body-tertiary">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-body-tertiary">Larger shadow</div>