Articles on: Custom extensions

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 ⚡️

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:

Step 3/4

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

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

Step 4/4

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

Done!

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

Bonus 🌈

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

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%);

Updated on: 20/04/2025

Was this article helpful?

Thank you!