Tailwind CSS: Gradient Text Color


Learn how to add a linear gradient generator as text color with Tailwind CSS. Try the CodePen example demo.

30 Jan, 2024 · 2 min read

CSS gradient text is super cool.

I love the vibe it gives off, and I made this pure CSS gradient text tutorial before.

Hence, in this tutorial you will learn how to create a gradient text in Tailwind CSS 👀.

See the example:

Tailwind CSS gradient text example

So, let’s get started!

How to create a gradient text color in Tailwind

Let’s get started by creating our headline and add the Tailwind CSS classes we need:

  class="font-extrabold text-transparent text-8xl bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600"
  Tailwind CSS

Those CSS classes will be all we need to create a cool gradient text color.

But first, let’s look at what those Tailwind CSS properties actually do.

These styles below just do the general styling - they are not needed for the liniear gradient effect itself:

  • text-8xl: Makes the text font-size 6rem - quite big
  • font-extrabold: Creates a bigger font-weight, so the visual effect pops more

Now, these classes however are the required classes to add the gradient generator to the text:

  • text-transparent: This makes the actual text transparent and shows the background (which has the gradient)
  • bg-clip-text: This makes the gradient background only show on the text outline
  • bg-gradient-to-{flow}: This is used to indicate the direction the linear gradient flow: (All directions)
  • from-{color}: Set the beginning color for the gradient generator - in our case “purple-400”
  • to-{color}: This sets the gradient end color - in our case “pink-600”

In the CodePen below, you can change the Tailwind CSS classes in the HTML and play around with the styling:


See the Pen Making gradient text with Tailwind CSS by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let’s connect!

Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Creating an animated wave line with Tailwind CSS

10 Mar, 2022 · 4 min read

Creating an animated wave line with Tailwind CSS

Tailwind CSS Numeric font variants

9 Mar, 2022 · 3 min read

Tailwind CSS Numeric font variants

Join 2099 devs and subscribe to my newsletter