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

# Gradients — React

Colour gradients are used for different channels and products.

Use `gradient` to retrieve colour stops by token name.

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

gradient('products.broadband-essential');
// returns ['#ff5c00', '#e30253']
```

Some gradients include explicit stop positions. An unknown or removed token returns `null`;
check the result before accessing its stops. See the [available gradients](/foundations/gradients/).

### Backgrounds

Pass `'background'` as the second argument to generate gradient background CSS:

```jsx
import styled from 'styled-components';
import { gradient } from '@sky-uk/ui-core';

const Background = styled.div`
  ${gradient('products.broadband-essential', 'background')}
`;
```

Gradients must not be used on typography or icons. See the [usage guidance](/foundations/gradients/usage/).