Box shadow

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

Figma

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(--su4) 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