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.
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:
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.