Skip to main content
Sections

Box shadow

Figma

Box shadow atomic classes allow you to change an element’s box shadow quickly.

Class Output Hover? Focus? Responsive?
.bs-none box-shadow: none;
.bs-sm box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.05),
0 1px 4px hsla(0, 0%, 0%, 0.05),
0 2px 8px hsla(0, 0%, 0%, 0.05)
.bs-md box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.06),
0 2px 6px hsla(0, 0%, 0%, 0.06),
0 3px 8px hsla(0, 0%, 0%, 0.09)
.bs-lg box-shadow: 0 1px 4px hsla(0, 0%, 0%, 0.09),
0 3px 8px hsla(0, 0%, 0%, 0.09),
0 4px 13px hsla(0, 0%, 0%, 0.13)
.bs-xl box-shadow: 0 10px 24px hsla(0, 0%, 0%, 0.05),
0 20px 48px hsla(0, 0%, 0%, 0.05),
0 1px 4px hsla(0, 0%, 0%, 0.1)
.bs-ring box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
<div class="bs-sm"></div>
<div class="bs-md"></div>
<div class="bs-lg"></div>
<div class="bs-xl"></div>
<div class="bs-ring"></div>
.bs-sm
.bs-md
.bs-lg
.bs-xl
.bs-ring
Deploys by Netlify