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.
text-transparent will make the text transparent.
bg-clip-text will crop an element’s background to match the shape of the 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:

See the Pen by Dhairya Shah (@dhairyathedev) on CodePen.

Follow me on Twitter

Thanks for reading!