Skip to content

Instantly share code, notes, and snippets.

@dillonchanis
Created September 20, 2020 14:44
Show Gist options
  • Star 43 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save dillonchanis/7b76ae89d13b662eb44866f570da817b to your computer and use it in GitHub Desktop.
Save dillonchanis/7b76ae89d13b662eb44866f570da817b to your computer and use it in GitHub Desktop.
Tailwind Utility for using gradients with text
@layer utilities {
.text-gradient {
background-clip: text;
-webkit-text-fill-color: transparent;
}
}
<span class="text-gradient bg-gradient-to-r from-pink-400 via-purple-400 to-indigo-500">
Download for free today.
</span>
@silvia-odwyer
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment