Loading lessons...
Box Shadow
Box Shadow
Shadows add depth to elements. Tailwind uses CSS variables that compose, so multiple shadow utilities can be combined.
Basic shadows
| Class | CSS |
|---|---|
shadow-sm | 0 1px 3px 0 rgb(0 0 0 / 0.1) |
shadow | 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px |
shadow-md | 0 4px 6px -1px, 0 2px 4px -2px |
shadow-lg | 0 10px 15px -3px, 0 4px 6px -4px |
shadow-xl | 0 20px 25px -5px, 0 8px 10px -6px |
shadow-2xl | 0 25px 50px -12px |
shadow-none | none |
<div class="shadow-md">...</div>Shadow color
Tint the shadow with shadow-<color>:
<div class="shadow-md shadow-sky-500/20">...</div>Inset shadows
inset-shadow-sm, inset-shadow, inset-shadow-md, inset-shadow-lg, inset-shadow-xl, inset-shadow-2xl. Inner shadows are separate from outer shadows.
Custom shadows with @theme
@theme {
--shadow-beans: 0 4px 14px -2px rgb(84 15 42 / 0.7);
}Generates shadow-beans.
Combining shadow layers
Shadow utilities compose via variables:
<div class="shadow-md shadow-sky-500/20 inset-shadow-sm">...</div>TL;DR
shadow-sm…shadow-2xladd depth.shadow-<color>tints the shadow.inset-shadow-*add inner shadows.- Define custom shadows with
--shadow-*in@theme.