Tailwind Utility for using gradients with text

example.css

@layer utilities {
  .text-gradient {
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

example.html

<span class="text-gradient bg-gradient-to-r from-pink-400 via-purple-400 to-indigo-500">
  Download for free today.
</span>

Different Method
<h1 class="bg-clip-text text-transparent bg-gradient-to-l from-blue-300 to-green-400">Gradient Text</h1>

Different Method
<h1 class="bg-clip-text text-transparent bg-gradient-to-l from-blue-300 to-green-400">Gradient Text</h1>

Yea this should be the preferred approach as it's baked into Tailwind. At the time of writing this I didn't realize it was already there! 😂

Different Method
<h1 class="bg-clip-text text-transparent bg-gradient-to-l from-blue-300 to-green-400">Gradient Text</h1>

This worked perfectly. Thanks! 🙏

Thanks~

Here is a tip if its not working: make sure you have the colors in your tailwind.config.js file under themes.

I was copying this code wondering why my text was blank- I didn't have blue and green in my colors lol!

Thanks!

Awesome!!!

Mahalo!

Thanks!

<h1 class="bg-clip-text text-transparent bg-gradient-to-l from-blue-300 to-green-400">Gradient Text</h1>

this doesnt work in Safari < 15.4

Thanks for this, gradient text is the best 🤩 Just adding a note here, that if anyone wants some lovely examples of Tailwind gradients that you can add to your text, I'd recommend this collection of Tailwind gradients here. Could work beautifully with the gradient text example above. 😄