How I made text gradients

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.

An example of how applying a gradient background to text also filles the background behind it.
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.