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 Website settings > Custom code > <body> 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 color 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%);
Was this article helpful?
Cancel
Thank you!