Skip to content

Instantly share code, notes, and snippets.

@dillonchanis
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.
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>
@kamaladenalhomsi
Copy link

Thanks

@heyarviind
Copy link

thanks

@kangah-codes
Copy link

Thank you very much!

@kvnal
Copy link

kvnal commented Mar 18, 2021

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

@dillonchanis
Copy link
Author

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! 😂

@mryechkin
Copy link

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! 🙏

@Lukuzushiki
Copy link

Thanks~

@philipwking
Copy link

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!

@JonasEriksson
Copy link

Thanks!

@codigoisaac
Copy link

Awesome!!!

@sparker888
Copy link

Mahalo!

@fvd2
Copy link

fvd2 commented Oct 13, 2021

Thanks!

@mike-luabase
Copy link

mike-luabase commented Jul 14, 2022

<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

@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