How to Create Gradient Text with TailwindCSS

You've probably seen the effect on various websites - that smooth gradient text that looks like it must be a graphic but it's actually real live html text.

Though it looks hard to create, it's really pretty simple once you know the right css to use. Today we're going to create this look using Tailwind CSS, though you could easily port this to vanilla CSS as well.

Simple Heading

We'll start with a simple heading, styled a bit so the effect is easier to see.

Awesome Heading

<h2 class="font-black tracking-tight text-center text-5xl">Awesome Heading</h2>

This gives us a nice simple heading.

Add Gradients

Now we'll add the gradients colors.

Awesome Heading

<h2 class="bg-gradient-to-t from-purple-800 to-purple-500 font-black tracking-tight text-center text-5xl">Awesome Heading</h2>

You may have noticed this just adds the gradients to the background of the html element, not to the letters themselves. That's why we need one more addition.

Background Clipping

Finally we'll add background clipping to act as a mask for the background gradient colors. We also need to set the text fill color to transparent.

Awesome Heading

<h2 class="bg-clip-text text-transparent bg-gradient-to-t from-purple-800 to-purple-500 font-black tracking-tight text-center text-5xl">Awesome Heading</h2>

This gives us our nice final design.

More Variations

Of course with this knowledge, you can now create multiple variations such as adding more colors:

Awesome Heading

<h2 class="font-black tracking-tight text-center text-5xl bg-gradient-to-t from-cyan-600 via-indigo-600 to-purple-500 bg-clip-text text-transparent">Awesome Heading</h2>

Changing the color direction:

Awesome Heading

<h2 class="font-black tracking-tight text-center text-5xl bg-gradient-to-r from-cyan-600 via-indigo-600 to-purple-500 bg-clip-text text-transparent">Awesome Heading</h2>

Or even adding background images:

Awesome Heading

<h2 class="font-black tracking-tight text-center text-5xl bg-slate-800 bg-clip-text text-transparent bg-cover" style="background-image: url(https://images.unsplash.com/photo-1584204559709-ca7d413229eb?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)">Awesome Heading</h2>

Let me know if you use this technique or others like it. Tag me on X - @tjwebdev

The wonderful photo used as a background is from Josefin on Unsplash