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 shadow
<div class="shadow-none p-large mb-4xlarge bg-secondary">No shadow</div>
<div class="shadow-default p-large mb-4xlarge bg-secondary">Default shadow</div>
<div class="shadow-drag p-large mb-4xlarge bg-secondary">Drag shadow</div>
<div class="shadow-emphasized p-large mb-4xlarge bg-secondary">Emphasized shadow</div>
<div class="shadow-raised p-large mb-4xlarge bg-secondary">Raised shadow</div>
<div class="shadow-sticky p-large mb-4xlarge bg-secondary">Sticky 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-small 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-large p-3 mb-5 bg-body-tertiary">Larger shadow</div>