Gradients

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.

Direction

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

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.

Custom colors

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

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