$type: "gradient"
composite
Gradient Token
Gradient tokens describe a smooth transition between colors. The $value is an array of at least two gradient stop objects, each with a color field (a color value) and a position field (a number from 0 to 1 representing the stop's position along the gradient). This provides the color stop data needed to generate CSS linear-gradient, radial-gradient, or conic-gradient values.
Value Format
An array of color stop objects with color and position
Composite Fields
| Field | Type | Required | Description |
|---|---|---|---|
| color | color | yes | The color at this stop |
| position | number | yes | Position along the gradient (0 = start, 1 = end) |
When to Use
Use gradient tokens for branded gradient backgrounds, button fills, progress bars, and decorative elements. Encoding gradients as tokens ensures the exact color stops are reused consistently rather than being re-invented per component.
Valid Example
Valid JSON .json
{
"gradient": {
"brand": {
"$value": [
{ "color": "#6366f1", "position": 0 },
{ "color": "#8b5cf6", "position": 0.5 },
{ "color": "#ec4899", "position": 1 }
],
"$type": "gradient",
"$description": "Brand gradient"
}
}
} Paste the example above into the validator to test it yourself.
Open Validator