How to create gradient text with Tailwind CSS

How to create gradient text with Tailwind CSS

In this article, I will teach you the simplest way to add gradient text with Tailwind CSS.

Let's do it!

We need to understand a few Tailwind CSS Classes in order to generate gradient text:

  • bg-gradient-to-br from-pink-300 via-purple-300 to-indigo-400 this class will give the gradient background to the text. gradient background

  • text-transparent will make the text transparent. Text transparent

  • bg-clip-text will crop an element’s background to match the shape of the text. Gradient text
<div class="text-5xl font-bold bg-gradient-to-r from-pink-500 to-violet-500 bg-clip-text text-transparent">
    It's a gradient text
</div>

If you're interested check out the live version, please do check the attached Codepen:

Thanks for reading

Follow me on Twitter

Thanks for reading!