How To Create Gradient Text with 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.

Create a massive header¶

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
</h1>

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

Choose your gradient¶

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
</h1>

Here's the result.

Clip the background¶

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
</h1>

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!

Fix up clipped text¶

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
</h1>

And here's the final result:

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