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>

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. 😄