Shadows
Add or remove shadows to elements with box-shadow utilities.
Examples
.shadow-sm
.shadow
.shadow-md
.shadow-lg
.shadow-xl
.shadow-none
Available values
| Class | Effect |
|---|---|
.shadow-none | No shadow |
.shadow-sm | Small `.05` alpha shadow |
.shadow / .shadow-base | Base shadow |
.shadow-md | Medium |
.shadow-lg | Large |
.shadow-xl / .shadow-2xl | Extra large |
.shadow-inner | Inset |
Use .shadow-sm … .shadow-xl for responsive variants as well (.shadow-lg default, .shadow-md on large screens, etc.).
Material elevation
For Material Design depths from 0–5, use the elevation helpers: .elevation-0 through .elevation-5.
<div class="elevation-3">Elevated</div>