Expand description
Utilities for controlling the box shadow of an element.
| Class | Properties | Preview |
|---|---|---|
| shadow-2xs | box-shadow: 0 1px rgb(0 0 0 / 0.05); | |
| shadow-xs | box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); | |
| shadow-sm | box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); | |
| shadow-md | box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); | |
| shadow-lg | box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); | |
| shadow-xl | box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); | |
| shadow-2xl | box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); | |
| shadow-none | box-shadow: 0 0 #0000; | |
| inset-shadow-2xs | box-shadow: inset 0 1px rgb(0 0 0 / 0.05); | |
| inset-shadow-xs | box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.05); | |
| inset-shadow-sm | box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.05); | |
| inset-shadow-none | box-shadow: inset 0 0 #0000; |
ยงArbitrary values
Any <shadow> property is allowed as arbitrary value.
For example, shadow-[2px_1px_20px_2px_rgb(12_12_42)] or inset-shadow-[0_2px_2px_rgb(0_0_0_/_0.1)].