Cherry offers several shadow variations that allow you to create elevations and add depth to your interfaces. Shadows play a crucial role in enhancing the visual hierarchy of elements, providing a sense of depth and realism.
There are two sets of shadows, one for dark mode and one for light mode.
| Level | Value |
|---|---|
| xs | 0px 4px 4px 0px rgba(18,18,18,0.04), 0px 1px 3px 0px rgba(39,41,45,0.02) |
| sm | 0px 4px 4px 0px rgba(18,18,18,0.08), 0px 1px 3px 0px rgba(39,41,45,0.04) |
| md | 0px 8px 8px 0px rgba(18,18,18,0.16), 0px 2px 3px 0px rgba(39,41,45,0.06) |
| lg | 0px 16px 24px 0px rgba(18,18,18,0.20), 0px 2px 3px 0px rgba(39,41,45,0.08) |
| xl | 0px 24px 32px 0px rgba(18,18,18,0.24), 0px 2px 3px 0px rgba(39,41,45,0.12) |
Shadows can be found in the Figma Template in the Shadows page.