---
title: "Core — generateSimpleGradient"
canonical: https://sky-ui.cf.sky.com/core/utilities/generate-simple-gradient
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Core — generateSimpleGradient

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

**Note:** You should read about the [gradients](/foundations/gradients/) theme function before using this
  utility.

---

`generateSimpleGradient` is a utility that can convert an Array of colour stops into a gradient.

This is useful if you are building your own gradient.

```tsx
() => {
  const MyComponent = styled.div`
    background-image: ${generateSimpleGradient("to left", ["red", "white"])};
    height: 32px;
    width: 100%;
  `;

  return <MyComponent />;
}
```