# Gradient

Gradient tokens define one single gradient, such as `linear black-to-white`  .

### Example Token Payload

This is what the gradient payload looks like:

```javascript
{
  "id": string
  "name": string
  "description": string
  "tokenType": "Gradient"
  "origin": ItemOrigin | null
  "value": {
    "from": {
      "x": double
      "y": double
    }, 
    "to": {
      "x": double
      "y": double
    },
    "type": "Linear" | "Radial" | "Angular",
    "aspectRatio": double
    "stops": [Gradient Stop],
    "referencedToken": Gradient | null
  }
}
```

### Gradient Stop

Gradient Stop represents one point where a new color is introduced within the gradient blend. Take the following example:

![Gradient defined within Figma](https://3953636179-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUnb_OsKFud9s-2JHEt%2F-MXBUPDF_dF9xvYJ5Rc6%2F-MXBVHk3Y8Tipefgs1n4%2FSni%CC%81mek%20obrazovky%202021-04-01%20v%C2%A010.15.06.png?alt=media\&token=6480b772-c523-4e3e-9aba-2374c662295d)

This gradient has 3 stops - red at the beginning, transparent in the middle, and purple at the end. In Supernova, the gradient stop is defined like this:

```javascript
{
  "position": number
  "color": {
    "hex": string
    "r": int (0-255),
    "g": int (0-255),
    "b": int (0-255),
    "a": int (0-255),
    "referencedToken": Color | null
  }
}
```

Note that each gradient stop color can be referenced from a different color token. If that is the case, `referencedToken` will contain [Color Token](https://supernova-developers.gitbook.io/supernova-dsm/design-system-data/tokens/colors) that is referenced.

### Associated functions

You can use the following functions to retrieve font tokens from your design system:

* [@ds.allTokens](https://supernova-developers.gitbook.io/supernova-dsm/function-list#ds-alltokens)
* [@ds.tokensByType](https://supernova-developers.gitbook.io/supernova-dsm/function-list#ds-tokensbytype) (with `"Gradient"`) attribute
* [@ds.tokensByGroupId](https://supernova-developers.gitbook.io/supernova-dsm/function-list#ds-tokensbygroupid)