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);`

<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