Dhairya Shah
Dhairya Shah's Blog

Follow

Dhairya Shah's Blog

Follow
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

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