Dhairya Shah
Dhairya Shah's Blog

Dhairya Shah's Blog

How to create gradient text with Tailwind CSS

How to create gradient text with Tailwind CSS

Dhairya Shah's photo
Dhairya Shah
·Sep 7, 2022·

1 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

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!

 
Share this