> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.unicornplatform.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Gradient title

This simple guide will show you how to create beautiful gradient headlines. The whole set up can be done in less than a minute ⚡️

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image-1_1yixej0.png)

#### Step 1/4

Copy this code:

```
<style>
.gradient-text {
	background: linear-gradient(90deg, #4AC7FA 0%, #E649F5 100%);
	color:  transparent;
	background-clip: text;
	-webkit-background-clip: text;
	font-family: inherit !important;
}
</style>
```

#### Step 2/4

Paste it into your  **Settings **-> **General settings** -> **Global <body> HTML code** section:

![](https://storage.crisp.chat/users/helpdesk/website/-/7/e/7/8/7e782a40c0560c00/image_34ern4.png =500x500)

#### Step 3/4

Pick the title you want to edit and wrap it with these HTML tags:

```
<span class="gradient-text">Your Text</span>
```

![](https://storage.crisp.chat/users/helpdesk/website/-/7/e/7/8/7e782a40c0560c00/image_fm5eux.png =500x500) 

#### Step 4/4

To change the colour of the gradient, replace the hex codes with your own ones:

![](https://storage.crisp.chat/users/helpdesk/website/-/7/e/7/8/7e782a40c0560c00/image_c1dqwx.png =500x500)

#### Done!

Open the live version of your website to see the results:

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_1y4anav.png)

#### Bonus 🌈

Try out these pre-designed gradients that you can apply right away. Simply replace this whole line of code:

![](https://storage.crisp.chat/users/helpdesk/website/-/7/e/7/8/7e782a40c0560c00/image_vbhie.png =500x500)

* `background: linear-gradient(244.91deg, #D4FFEC 15.94%, #57F2CC 48.55%, #4596FB 84.06%);`

* `background: linear-gradient(90deg, #C6FFDD 0%, #FBD786 50%, #F7797D 100%);`

* `background: linear-gradient(225deg, #231557 0%, #44107A 28.6%, #FF1361 66.82%, #FFF800 100%);`

* `background: linear-gradient(90deg, #FF75C3 0%, #FFA647 20%, #FFE83F 40%, #9FFF5B 60%, #70E2FF 80%, #CD93FF 100%);`