Gradients are all the rage. You cant go anywhere without seeing a gradient. They are used in logos, backgrounds, buttons, and even text. In this post, we will look at how to create a gradient text effect in CSS. It looks great, and it’s super easy to do. And I’m going to show you how to achieve this effect using CSS. Let’s get started.

The first thing you need is linear gradient background. There are a tonne of generators for these on the web, such as cssgradient.io or uigradients.com. Apply the background to your text using the background property.

.my-gradient-text {
  background: linear-gradient(90deg, #f6d365 0%, #fd5128 90%);
}

Next you will need the background to be transparent. This is done using the -webkit-background-clip property.

.my-gradient-text {
  background: linear-gradient(90deg, #f6d365 0%, #fd5128 90%);
  -webkit-background-clip: text;
}

Finally, you will need to set the text colour to be the transparent. This is done using the -webkit-text-fill-color property.

.my-gradient-text {
  background: linear-gradient(90deg, #f6d365 0%, #fd5128 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Note, that the -webkit- prefix is required for this to work in Safari. If you are not supporting Safari, you can remove it.

Lets see the final result.

And that’s it! You now have a gradient filled text effect.