# Shadows

> Cherry's shadow elevation system with five levels for light and dark modes.

Source: https://cherry.al/shadows

> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).

# Shadows

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.

<iframe className="light-only" src="https://demo.cherry.al/preview/shadows?theme=light" title="Shadow elevations" loading="lazy" style={{ width: "100%", height: "500px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />
<iframe className="dark-only" src="https://demo.cherry.al/preview/shadows?theme=dark" title="Shadow elevations" loading="lazy" style={{ width: "100%", height: "500px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />

<Tabs>
  <TabContent title="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)` |

  </TabContent>
  <TabContent title="Dark Mode">

| Level  | Value                                                                              |
| ------ | ---------------------------------------------------------------------------------- |
| **xs** | `0px 4px 4px 0px rgba(255,255,255,0.04), 0px 1px 3px 0px rgba(255,255,255,0.02)`   |
| **sm** | `0px 4px 4px 0px rgba(255,255,255,0.08), 0px 1px 3px 0px rgba(255,255,255,0.04)`   |
| **md** | `0px 8px 8px 0px rgba(255,255,255,0.16), 0px 2px 3px 0px rgba(255,255,255,0.06)`   |
| **lg** | `0px 16px 24px 0px rgba(255,255,255,0.20), 0px 2px 3px 0px rgba(255,255,255,0.08)` |
| **xl** | `0px 24px 32px 0px rgba(255,255,255,0.24), 0px 2px 3px 0px rgba(255,255,255,0.12)` |

  </TabContent>
</Tabs>

## Usage

Shadows live on the theme object under `theme.shadows`, keyed by level (`xs`, `sm`, `md`, `lg`, `xl`). Reference them in your styled components and the matching set is applied automatically in light and dark mode:

```tsx
import styled from "styled-components";

const Card = styled.div`
  box-shadow: ${({ theme }) => theme.shadows.md};
`;
```

The raw values are also exported as `shadows` and `shadowsDark` from `cherry-styled-components` if you need them outside the theme.

<Callout type="info">
  Shadow tokens live on the theme object; see [Theme](/code/theme) for setup.
</Callout>

<Callout type="note">
  Shadows can be found in the Figma Template in the Elevation section of the
  Foundations page.
</Callout>

<Button href="https://www.figma.com/community/file/943862931766586094/Cherry-Design-System" icon="pen-tool" iconPosition="left">
  View in Figma
</Button>