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

Member

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

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

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by giovanny.lueilwitz , 10 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.

Related Threads:

How to animate text gradient color change in tailwind?
How to change the direction of a gradient in tailwind css?
How to apply smooth animation to conic-gradient() using tailwind css?
How to perfectly align text vertically in tailwind css?
How to add a custom color to a gradient with tailwind and react.js?
How to truncate text in tailwind css?