Shadows
Box-shadow and text-shadow utility classes - size variants, color variants, inset shadows, and pseudo-state support.
Box shadow
Apply a box shadow with .shadow or use a size variant. Shadow utilities are generated from the $shadow-utility map.
Preview
<div class="shadow-sm">Small shadow</div>
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl">Extra-large shadow</div>| Class | Offset | Description |
|---|---|---|
.shadow-sm | 0 1px 2px | Subtle shadow for cards and inputs |
.shadow-md | 0 2px 4px | Medium elevation |
.shadow-lg | 0 4px 8px | Raised elements like dropdowns |
.shadow-xl | 0 8px 16px | High elevation for modals and dialogs |
Default shadow
The base .shadow class applies the default box-shadow. Use .shadow-inset for an inset variant.
<div class="shadow">Default shadow</div>
<div class="shadow-inset">Inset shadow</div>Color shadows
Shadow color variants are generated from $theme-colors. Use .shadow-{color} to apply a colored box-shadow.
Preview
<div class="shadow-primary">Primary shadow</div>
<div class="shadow-danger">Danger shadow</div>Colored size variants
Every color can combine with every size, and each combo also ships an inset twin. .shadow-{color} is shorthand for the sm size.
Preview
<!-- Colored shadow with a size -->
<div class="shadow-primary-lg">Large primary shadow</div>
<!-- Inset shadows -->
<div class="shadow-inset-sm">Inset small</div>
<div class="shadow-inset-primary">Inset primary</div>
<div class="shadow-inset-danger-lg">Large inset danger</div>
<!-- Pseudo-state variant -->
<div class="hover:shadow-success-lg">Lift on hover</div>| Class | Description |
|---|---|
.shadow-inset-{size} | Neutral inset shadow, e.g. .shadow-inset-xl |
.shadow-{color}-{size} | Colored outset shadow of a given size |
.shadow-inset-{color} | Colored inset shadow (sm size) |
.shadow-inset-{color}-{size} | Colored inset shadow of a given size |
Sizes are sm, md, lg, and xl; colors are the full theme palette. All combos support pseudo-state prefixes, e.g. hover:shadow-success-lg.
Hover variants
Prefix with hover: to apply a shadow only on mouse hover. Works with both the base shadow and color variants.
<div class="hover:shadow">Shadow on hover</div>
<div class="hover:shadow-primary">Primary shadow on hover</div>Text shadow
Apply a text shadow with .text-shadow. Color variants follow the same pattern: .text-shadow-{color}.
Preview
<h2 class="text-shadow">Default text shadow</h2>
<h2 class="text-shadow-primary">Primary text shadow</h2>
<h2 class="text-shadow-danger">Danger text shadow</h2>Pseudo-state support. Both.shadowand.text-shadowutilities supporthover:,focus:, andactive:pseudo-state prefixes - e.g.hover:text-shadow-primary.