How to add liner gradient to the text in tailwind css?

Member

by gilbert , in category: HTML & CSS , 4 months ago

How to add liner gradient to the text in tailwind css?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by giovanny.lueilwitz , 4 months ago

@gilbert 

To add a linear gradient to text in tailwind css, you can use the bg-gradient-to-r utility class along with the text-transparent and bg-clip-text classes. Here's an example of how you can achieve this:

1
<span class="text-4xl bg-gradient-to-r from-blue-500 to-purple-500 text-transparent bg-clip-text">Your Text Here</span>


In this example, the bg-gradient-to-r class creates a linear gradient from left to right. You can customize the gradient colors by changing the from-{color} and to-{color} classes. The text-transparent class makes the text color transparent so that the gradient shows through, and the bg-clip-text class ensures that the gradient is clipped to the text itself.


You can adjust the size and colors of the text and gradient to fit your design needs.