Shadows are a set of box-shadow values that give the element a sense of depth.
CSS variables
Shadow values are defined in a 6-step scale.
| --box-shadow-1 | 0 1px 2px 0 rgb(0 0 0 / 0.05) |
| --box-shadow-2 | 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) |
| --box-shadow-3 | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) |
| --box-shadow-4 | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) |
| --box-shadow-5 | 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) |
| --box-shadow-6 | 0 25px 50px -12px rgb(0 0 0 / 0.25) |
Component props
| shadow | Responsive<"1" | "2" | "3" | "4" | "5" | "6"> |