Skip to content

Instantly share code, notes, and snippets.

@dillonchanis

dillonchanis/example.css

Created September 20, 2020 14:44
Show Gist options
  • Save dillonchanis/7b76ae89d13b662eb44866f570da817b to your computer and use it in GitHub Desktop.
Save dillonchanis/7b76ae89d13b662eb44866f570da817b to your computer and use it in GitHub Desktop.
Download ZIP
Tailwind Utility for using gradients with text
Raw
example.css
@layer utilities {
.text-gradient {
background-clip: text;
-webkit-text-fill-color: transparent;
}
}
Raw
example.html
<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