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%);
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%);
Updated on: 15 / 12 / 2021