Sep 7th, 2022

How to create gradient text with Tailwind CSS

Author Picture

Dhairya Shah

Software Engineer

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:

<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

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

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

Thanks for reading

Follow me on Twitter

Thanks for reading!