import { Meta } from "@storybook/addon-docs";
# Gradients
Gradients are used to add depth to an interface.
## Using gradient tokens
TipGradients are defined as CSS Custom
properties, to use them, use: var(--grad-primary-dark) as the
gradient color values.
```
background-image: linear-gradient(to bottom right, var(--grad-primary-dark));
background-image: radial-gradient(to bottom right, var(--grad-primary-dark));
```
---
Gradients
--grad-neutral-light
--grad-neutral
--grad-neutral-dark
--grad-primary-light
--grad-primary
--grad-primary-dark
--grad-secondary-light
--grad-secondary
--grad-secondary-dark
--grad-secondary-primary-light
--grad-secondary-primary
--grad-secondary-primary-dark
--grad-neutral-primary-light
--grad-neutral-primary
--grad-neutral-primary-dark
Direction
Example:
```
background-image: linear-gradient(to right, var(--grad-primary));
```
to bottom right
to bottom
to top
to right
to left
Types
Example:
```
background-image: radial-gradient(var(--grad-primary-dark));
background-image: linear-gradient(var(--grad-primary-dark));
```
radial-gradient
linear-gradient