Shadows
Shadow utilities apply elevation levels via box-shadow from design tokens. Use shadow-0 to remove shadows and shadow-inset-1 through shadow-inset-4 for inner shadows.
Elevation levels
Six levels from shadow-0 (none) through shadow-4 (highest), plus four inset levels.
index.htmlhtml
<div class="d-flex flex-wrap gap-4">
<div class="bg-surface border rounded-md p-3 shadow-0">shadow-0</div>
<div class="bg-surface border rounded-md p-3 shadow-1">shadow-1</div>
<div class="bg-surface border rounded-md p-3 shadow-2">shadow-2</div>
<div class="bg-surface border rounded-md p-3 shadow-3">shadow-3</div>
<div class="bg-surface border rounded-md p-3 shadow-4">shadow-4</div>
<div class="bg-surface border rounded-md p-3 shadow-inset-1">shadow-inset-1</div>
<div class="bg-surface border rounded-md p-3 shadow-inset-2">shadow-inset-2</div>
<div class="bg-surface border rounded-md p-3 shadow-inset-3">shadow-inset-3</div>
<div class="bg-surface border rounded-md p-3 shadow-inset-4">shadow-inset-4</div>
</div>shadow-0
shadow-1
shadow-2
shadow-3
shadow-4
shadow-inset-1
shadow-inset-2
shadow-inset-3
shadow-inset-4
Reference
| Class | Property | Responsive |
|---|---|---|
.shadow-0 | box-shadow: var(--sh0) | No |
.shadow-1 | box-shadow: var(--sh1) | No |
.shadow-2 | box-shadow: var(--sh2) | No |
.shadow-3 | box-shadow: var(--sh3) | No |
.shadow-4 | box-shadow: var(--sh4) | No |
.shadow-inset-1 | box-shadow: var(--sh-inset-1) | No |
.shadow-inset-2 | box-shadow: var(--sh-inset-2) | No |
.shadow-inset-3 | box-shadow: var(--sh-inset-3) | No |
.shadow-inset-4 | box-shadow: var(--sh-inset-4) | No |