In this post, I'll show you how you can add gradients to text in css and tailwindcss easily

TLDR; Entire code is available here: play.tailwindcss.com/ZBsGe7ttoA

You can also import this code block in the UiBun Visual Editor

Text gradients in css

The trick to text gradients is setting the text color to transparent then adding a background gradient then using background-clip: text; css property. This will display the background gradient that you added only over the text. Here's a code example:

<style>
.gradient-text {
	background: linear-gradient(#0061ff, #60efff);
	background-clip: text;
	color: transparent;
}
</style>

<h1 class="gradient-text">This is a cool gradient text</h1>

Pretty cool isn't it?

Now, let's implement gradient text using tailwind css.

Text gradients in tailwindcss

We can translate the same css code into tailwindcss for a similar gradient text effect. We make use of bg-clip-text tailwind class along with text-transparent to make this happen. Here's a code example:

<p class="bg-gradient-to-r from-[#0061ff] to-[#60efff] bg-clip-text text-transparent">Best gradient in the world!</p>

For an added effect, consider making the text bolder and larger. You could also make it dramatic by adding a dark background to the parent container. Here's a better example:

<div class="flex h-40 items-center justify-center bg-black">
  <p class="bg-gradient-to-r from-[#0061ff] to-[#60efff] bg-clip-text text-2xl font-bold text-transparent">Best gradient in the world!</p>
</div>

Animating the text gradient

Similar to how you can animate a gradient background, you can simply implement a gradient animation keyframe similar to the codepen here and it will work for the text too. You can try it out!

Finally

See, it is so easy to implement gradient text in css and tailwind css. I hope you learned something today. Subscribe to the UiBun newsletter to get updates about product and new blog posts.