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!

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