> ## Documentation Index
> Fetch the complete documentation index at: https://www.propeldata.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Shadows

> Select shadow styles for your components.

<div />

Shadows used in the components are derived from a 6-step scale.

<img src="https://mintcdn.com/propeldocs/r8FN1fDId_ZpxHvr/images/docs/shadows.png?fit=max&auto=format&n=r8FN1fDId_ZpxHvr&q=85&s=56ba30be93c1a87345438c11efe88584" alt="Shadows" width="1492" height="304" data-path="images/docs/shadows.png" />

#### Shadow tokens

Shadow tokens can be accessed using CSS variables. You can use these tokens to style your custom components, ensuring they are consistent with the rest of your theme.

```css theme={"system"}
/* Inset shadow */
var(--shadow-1);

/* Shadows for variant="classic" panels, like Card */
var(--shadow-2);
var(--shadow-3);

/* Shadows for smaller overlay panels, like Hover Card and Popover */
var(--shadow-4);
var(--shadow-5);

/* Shadows for larger overlay panels, like Dialog */
var(--shadow-6);
```