A big part of my website’s design is the use of gradients. They’re on my links, on my titles, in my footer and in my favicon. I wanted to share how to do your own text gradients.

First of all, you need to pick a gradient that you like the look of. I’d recommend not using colours that are similar, as the gradient might not be that visible. You can use CSSGradient.io as a fantastic free tool to create the perfect gradient. It’s what I used in this tutorial.

Once you have the perfect gradient, you need to make some text. You’ll see that I made a class called ‘gradient’, because I wanted to be able to easily apply the CSS to elements.

You’ll want to add a colour on the text and a normal coloured background. These will be your fallbacks if something goes wrong. Then, add the gradient as a background.

It won’t look great there, as you can see below.

Example 1
Eek! That does NOT look good. 🤢

So, to clip the background to the text and the text only, we need to add two -webkit lines of code: -webkit-text-fill-color: transparent; and -webkit-background-clip: text;. These remove the fill from the text and clip the background to the text respectively.

Check out my CodePen below to see how it all works together:

See the Pen Gradient Text by Jaydn Edwards (@jaydn_edwards) on CodePen.

Thanks for reading! If you found this helpful, I’d love a share and a mention on social media! If you use it yourself, I’d love to see it. Follow me on Twitter @jaydn_edwards.