Summer sale! Save 50% on access to our entire library of courses.Join here →

How To Create Gradient Text with Tailwind

June 15th, 2024

In this guide, let's walk through the steps needed to create gradient text in Tailwind.

You can apply this gradient effect to any text or header without additional Tailwind plugins or configuration. We only need to use a few standard Tailwind classes to apply the gradient and then clip the background.

Start out with some text you'd like to apply gradients to. Here's an example:

<h1 class="text-6xl font-extrabold">
    I love gradients

This gives us a nice bold header so we'll see our Tailwind gradients in action more clearly (great for experimenting).


Next, apply the gradient you'd like to see directly onto the text element. This won't look right, but it gives you a full view of the Tailwind gradient you will apply.

<h1 class="text-6xl font-extrabold bg-gradient-to-bl from-blue-500 to-blue-800">
    I love gradients

Here's the result.


Once you're happy with your gradient, it's time to clip the background to the text. We can achieve this with the bg-clip-text class, but we also need to text the text transparent. Otherwise, we'll be left with the default colour of the text.

<h1 class="text-6xl font-extrabold bg-gradient-to-bl from-blue-500 to-blue-800 bg-clip-text text-transparent">
    I love gradients

And here's the result (we'll fix the g character in a moment):


So how does this work?

When we apply bg-clip-text, it applies the background-clip CSS property, which takes the shape of the text and removes anything outside of the boundary of the text shape. Because our text has a default color, making it transparent reveals the clipped shape behind it!

You'll notice in the result above that we have a minor clipping issue at the bottom of the header, potentially cutting into any taller characters (g, in this case). This isn't Tailwind's doing; it's just a side effect of the CSS properties we're using.

To fix this, add leading-normal to your header or choose a larger line height.

<h1 class="text-6xl font-extrabold bg-gradient-to-bl from-blue-500 to-blue-800 bg-clip-text text-transparent leading-normal">
    I love gradients

And here's the final result:


While my example doesn't look great, you can now add gradients to any text in Tailwind.

Thanks for reading! If you found this article helpful, you might enjoy our practical screencasts too.
Alex Garrett-Smith
Share :


No comments, yet. Be the first to leave a comment.