---
title: "Gradients — React"
canonical: https://sky-ui.cf.sky.com/foundations/gradients/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Gradients — React

Colour gradients are used for different channels and products.

You can use the `gradient` function to get color stops from the theme by name.

```js
import { gradient } from '@sky-uk/ui-core';

gradient('primary');

// returns
['#000FF5', '#000FBE'];
```

### Return Types

The `gradient` function also supports a second argument, which sets the return type. Passing `'text'` as a string to the second argument will return a css block that is suitable for applying gradients to text:

```jsx
styled.div`
  ${gradient('primary', 'text')}
`;

// returns
.c0{
    @supports (-webkit-background-clip: text) or (background-clip: text) {
      background-image: linear-gradient(to right, #000FF5 0%, #000FBE 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
}

```

Passing `'background'` as a string to the second argument then it will return a line of css, setting the background-image of the component to a gradient:

```jsx
styled.div`
  ${gradient('primary', 'background')}
`;

// returns
.c0{
  background-image: linear-gradient(to right, #000FF5 0%, #000FBE 100%);
}
```