This is a preview, you can find the current version here.
Last updated: 12/16/2025
Figma Box shadow
Box shadow atomic classes allow you to change an element's box shadow quickly.
Classes
| 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); |
Examples
<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