Shadows
| Example | Token | Value | Notes |
|---|---|---|---|
xs | 0 0 0 1px rgba(0, 0, 0, 0.05) | Looks like a light 1px border | |
sm | 0 1px 2px 0 rgba(0, 0, 0, 0.05) | ||
base | 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) | Top bar | |
md | 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) | ||
lg | 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) | Modal, Drawer | |
xl | 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) | ||
2xl | 0 25px 50px -12px rgba(0, 0, 0, 0.25) | ||
outline | 0 0 0 3px rgba(110, 63, 255, 0.6) | Used as focus ring | |
inner | inset 0 2px 4px 0 rgba(0,0,0,0.06) | ||
none | none | ||
dark-lg | rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px | Only used in dark mode |