# Gradients

Source: https://iriscss.com/documentation/helpers/gradients/

`.gradient` paints a background gradient from any palette family.

Add a palette family class, such as `.blue` or `.amber`, to pick the colors. The gradient runs from the 200 shade through 500 to 800. Without a family it uses gray.

```html
<div class="gradient" style="height: 3rem"></div>
<div class="gradient blue" style="height: 3rem"></div>
<div class="gradient fuchsia" style="height: 3rem"></div>
<div class="gradient emerald" style="height: 3rem"></div>
```

## Direction

A linear gradient runs to the right. `.to-top`, `.to-bottom` and `.to-left` change that.

```html
<div class="gradient amber to-top" style="height: 5rem"></div>
<div class="gradient amber to-bottom" style="height: 5rem"></div>
<div class="gradient amber to-left" style="height: 5rem"></div>
```

## Radial

`.radial` makes a circle from the center. `.ellipse` changes the shape, and `.radial-top`, `.radial-right`, `.radial-bottom` and `.radial-left` move the center.

```html
<div class="gradient radial violet" style="height: 6rem"></div>
<div class="gradient radial ellipse violet" style="height: 6rem"></div>
<div class="gradient radial radial-top violet" style="height: 6rem"></div>
```

## Custom colors

Set `--i-gradient-stops` for any colors you like.

```html
<div class="gradient" style="--i-gradient-stops: var(--i-color-sky-400), var(--i-color-violet-500), var(--i-color-pink-500); height: 3rem"></div>
```

The family classes share their names with the palette, but on their own they do nothing. They only pick colors on an element with `.gradient`.

## Variables

| Variable | Default |
| --- | --- |
| `--i-gradient-stops` | `var(--i-color-gray-200), var(--i-color-gray-500), var(--i-color-gray-800)` |
| `--i-gradient-direction` | `to right` |
| `--i-gradient-shape` | `circle` |
| `--i-gradient-position` | `center` |