Rishi Purwar I'm an enthusiastic full-stack Web developer from India who has been building side projects for quite some time now. You can check out all my projects at github.com/rishipurwar1 to learn more about what I do!

A guide to adding gradients with Tailwind CSS

13 min read 3798

A guide to adding gradients with Tailwind CSS

Are you looking for an in-depth guide on how to add gradients with Tailwind CSS? Maybe you want to create a beautiful text gradient for the hero section of your website or add an attractive border gradient for your site’s cards.

You’re in luck! I’ve recently been playing around with gradients in Tailwind CSS and thought it would be fun to write up a guide on how to add them.

In this blog, we’ll be using Tailwind CSS to create beautiful background, text, border, and underline gradients. We’ll also walk through how to animate gradients in Tailwind CSS. Let’s get started!

Introduction to Tailwind CSS gradients

Gradients are a great way to inject some extra vibrancy into your websites. But they’re not just for backgrounds anymore — we can add gradients to any element, including text, borders, cards, inputs, and so on!

Before diving into Tailwind CSS gradients and coding some pretty cool stuff, we need to understand the basics of Tailwind CSS gradients and how they work.

To create a basic gradient in Tailwind CSS, we need to use these three Tailwind CSS classes:

  1. bg-gradient-to-{direction}
  2. from-{color}
  3. to-{color}

Let’s discuss the first one. bg-gradient-to-{direction} defines the direction of the gradient. The direction can either be horizontal, vertical, or diagonal.

The horizontal linear gradient has two classes:

  1. bg-gradient-to-r: defines a horizontal linear gradient (HLG) from left to right
  2. bg-gradient-to-l: defines an HLG from right to left

The vertical linear gradient also has two classes:

  1. bg-gradient-to-t: defines a vertical linear gradient (VLG) from bottom to top
  2. bg-gradient-to-b: defines a VLG from top to bottom

Lastly, the diagonal gradient has four classes:



  1. bg-gradient-to-tr: defines a diagonal linear gradient (DLG) from bottom left to top right
  2. bg-gradient-to-tl: defines a DLG from bottom right to top left
  3. bg-gradient-to-br: defines a DLG from top left to bottom right
  4. bg-gradient-to-bl: defines a DLG from top right to bottom left

Next, we have from-{color}. This defines the starting color of the gradient. We can use any Tailwind CSS color class as the starting color for a gradient, such as from-purple-500.

Finally, we have to-{color}. This defines the ending color of the gradient. We can use any Tailwind CSS color class as the ending color for a gradient, like to-purple-800.

How to add linear background gradients in Tailwind CSS

We’ve learned about the basic Tailwind CSS gradient classes. Now, let’s use that knowledge to create a linear background gradient.

To start, we’ll need a div container. Let’s create that first and give it some height:

<div class="h-72"></div>

The next thing we need to do is add a background gradient. Let’s add a simple linear gradient by specifying the from-{color} and to-{color} Tailwind CSS classes.

In this example, we’ll create a linear gradient from from-purple-600 to to-blue-600. Let’s go ahead and add these classes:

<div class="h-72 from-purple-600 to-blue-600"></div>

Next, we need to specify a direction using the bg-gradient-to-{direction} class. This tells Tailwind CSS which direction it should flow in.


More great articles from LogRocket:


In this example, we want it to flow from left to right so we’ll add the bg-gradient-to-r class:

<div class="h-72 bg-gradient-to-r from-purple-600 to-blue-600"></div>

You should see a linear background gradient in the demo below:

See the Pen
Background Gradient
by Rishi Purwar (@rishi111)
on CodePen.

Let’s try to change the direction of the gradient from left to right to top to bottom. To change the direction, we need to replace the bg-gradient-to-r class with the bg-gradient-to-b class:

<div class="h-72 bg-gradient-to-b from-purple-600 to-blue-600"></div>

You can see that the gradient is now flowing from top to bottom instead of left to right:

See the Pen
Background Gradient: top-to-bottom
by Rishi Purwar (@rishi111)
on CodePen.

Quick tip: if we want to create a faded gradient effect, we don’t need to add a to-{color} class. We only need to use the bg-gradient-to-{direction} and from-{color} classes to create a faded gradient effect in Tailwind CSS.

Customizing Tailwind CSS gradients with more than two color stops

In this section, we’ll look at how we can create gradients in Tailwind CSS with more than two color stops. This allows us to make more colorful and vibrant gradients.

So far, we’ve been using only two color stops: from-{color} and to-{color}. Now, to add a third color stop in our gradient, we’ll use the via-{color} class along with the from-{color} and to-{color} classes to add a middle color.

Let’s do this using our previous example. Your code should look like this:

<div class="h-72 bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600"></div>

You can see the background gradient with three color stops in action in this demo:

See the Pen
Background Gradient: More than Two color stops
by Rishi Purwar (@rishi111)
on CodePen.

Adding radial background gradients

Next, we’ll learn how to add radial background gradients in Tailwind CSS. As you already know, Tailwind CSS doesn’t provide direct classes to create a radial gradient. We need to do some configuration to add support for it instead. Let’s get started!

The first thing we need to do is add support for the radial gradient. We do this by extending the theme property by adding the following code in our tailwind.config.js file:

module.exports = {
  content: ["./src/**/*.{js,jsx}"],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
      }
    }
  }
}

We are now ready to start creating our first radial background gradient!

First, copy and paste the final code from the last section:

<div class="h-72 bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600"></div>

To create a radial background gradient, we need to replace bg-gradient-to-r with the bg-gradient-radial class to add a radial background gradient:

<div class="h-72 bg-gradient-radial from-purple-600 via-pink-600 to-blue-600"></div>

You can see the radial background gradient with three color stops in the image below:

Background Gradient With Three Color Stops

Adding text gradients

Text gradients are a great way to add extra vibrancy to your text. In this section, we’ll learn how to add text gradients in Tailwind CSS.

To start, we’ll need an h1 tag. Let’s create that first and give it some basic styling.

<h1 class="text-5xl p-4 text-center font-bold">A Guide to Adding Gradients with Tailwind CSS</h1>

The next thing we need to do is add a background gradient to our text. Let’s add a simple linear gradient by specifying the color stops. We’ll use the same color stops we used in the last example, from-purple-600 via-pink-600 to-blue-600.

Next, we need to specify the direction of the gradient using the bg-gradient-to-r class. Go ahead and add these classes.

<h1 class="text-5xl p-4 text-center font-bold bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600">A Guide to Adding Gradients with Tailwind CSS</h1>

You should see something like this:

Text Gradient Example

As we can see, the background gradient is applied as a background to our text instead of the text gradient. So how do we make it work?

To have the effect we wanted, we need to use the bg-clip-text Tailwind CSS class that allows us to clip the background of an element. In our case, we want to clip the background of the h1 tag to match the shape of the text. Go ahead and add that class:

<h1 class="text-5xl p-4 text-center font-bold bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 bg-clip-text">A Guide to Adding Gradients with Tailwind CSS</h1>

Text Gradient Example With White Background

Here, we clipped the element’s background but can’t see the text gradient. That’s because the black text color is overlapping with the background gradient. To hide that, we need to use the text-transparent class to make the color of the text transparent. Go ahead and add that class:

<h1 class="text-5xl p-4 text-center font-bold bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 bg-clip-text text-transparent">A Guide to Adding Gradients with Tailwind CSS</h1>

Great! You can see the text gradient in action in this demo:

See the Pen
Tailwind CSS Text Gradient
by Rishi Purwar (@rishi111)
on CodePen.

How to add border gradients in Tailwind CSS

In this section, we’ll look at how we can add border gradients in Tailwind CSS to a button and input element. We’ll also see how we can add gradient borders around a card component.

Button border gradient

First, let’s see how we can add a border gradient to a button element. Let’s create a button with a basic Tailwind CSS styling:

<button class="m-4 rounded-full">
  <span class="block text-black px-4 py-2 font-semibold rounded-full">Follow Me</span>
</button>

Next, add a gradient background to the button using the background gradient classes we saw in the previous sections:

<button class="m-4 rounded-full bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500">
  <span class="block text-black px-4 py-2 font-semibold rounded-full">Follow Me</span>
</button>

The button should look like this:

Follow Me Button

Now, we need to add a bg-white class to the span tag to hide the button gradient background. We also need to add some padding to the button element to create a border around the span tag. Go ahead and add those classes:

<button class="m-4 p-1 rounded-full bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500">
  <span class="block text-black px-4 py-2 font-semibold rounded-full bg-white">Follow Me</span>
</button>

You can see the button with a gradient border in this demo:

See the Pen
Tailwind CSS Button with Border Gradient
by Rishi Purwar (@rishi111)
on CodePen.

Input border gradient

Next, we’ll look at how we can add a gradient border around an input tag. This can be a little tricky.

First, let’s create an input with basic styling:

<div class="m-4 rounded-full max-w-sm">
  <label for="name" class="sr-only">Name</label>
  <input class="p-3 w-full rounded-full focus:outline-none" type="text" id="name" placeholder="Enter Your Name">
</div>

Using the background gradient classes, let’s add a background gradient to the div tag:

<div class="m-4 rounded-full max-w-sm bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500">
  <label for="name" class="sr-only">Name</label>
  <input class="p-3 w-full rounded-full focus:outline-none" type="text" id="name" placeholder="Enter Your Name">
</div>

You should see something like this:

Enter Name Input Tag

Right now, we aren’t able to see any gradient background. This is because the input background overlaps the div’s background gradient.

To make the gradient border visible, we need to add some padding to the div element to create a border around the input tag. Go ahead and add p-1 class:

><div class="m-4 p-1 rounded-full max-w-sm bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500">
  <label for="name" class="sr-only">Name</label>
  <input class="p-3 w-full rounded-full focus:outline-none" type="text" id="name" placeholder="Enter Your Name">
</div>

🤩 Magic! We can now see a gradient border around the input tag!

So what precisely did we do?

We added some space inside div using the p-1 class. This made div’s background gradient visible only on the space that appears as a border around the input tag.

You can see the input element with a gradient border in the demo below:

See the Pen
Tailwind CSS Input with Border Gradient
by Rishi Purwar (@rishi111)
on CodePen.

Card border gradient

Now, let’s see how we can add a border gradient around a card component. Adding a gradient border around a card component is similar to what we saw in the previous section, so let’s first create a card component with basic styling. Just copy and paste the following HTML into your HTML file:

<article class="mx-auto my-4 max-w-sm rounded-xl">
  <div class="p-5 rounded-lg">
    <h4 class="text-2xl font-bold">Take your Web Dev skills to the next level!</h4>
    <a class="hover:underline text-gray-600" href="https://coding-space.vercel.app" target="_blank" title="codingspace">Visit CodingSpace↗</a>
  </a>
</article>

This will create a card component with basic Tailwind CSS styling that looks something like this:

Webdev Skills Plain Card Component

Let’s add a gradient background to this card by adding gradient classes to the article tag. Go ahead and add those classes:

<article class="mx-auto my-4 max-w-sm rounded-xl bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500">
  <div class="p-5 rounded-lg">
    <h4 class="text-2xl font-bold">Take your Web Dev skills to the next level!</h4>
    <a class="hover:underline text-gray-600" href="https://coding-space.vercel.app" target="_blank" title="codingspace">Visit CodingSpace↗</a>
  </a>
</article>

Now, the card component should look like this:

Webdev Skills With Gradient Background Over Entire Text

Can you guess what the next step should be?🤔

We’ll make the div’s background white to hide the gradient background behind it. We’ll also add padding to the article tag using the p-1.5 class to create a border around the div element.

Let’s add those classes to create a gradient border around the card component:

<article class="p-1.5 mx-auto my-4 max-w-sm rounded-xl bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500">
  <div class="bg-white p-5 rounded-lg">
    <h4 class="text-2xl font-bold">Take your Web Dev skills to the next level!</h4>
    <a class="hover:underline text-gray-600" href="https://coding-space.vercel.app" target="_blank" title="codingspace">Visit CodingSpace↗</a>
  </a>
</article>

Now, the card component should look like this:

See the Pen
Tailwind CSS Card Component with Border Gradient
by Rishi Purwar (@rishi111)
on CodePen.

Adding a gradient underline

In this section, we’ll learn how to add a gradient underline to some text in Tailwind CSS. First, let’s create an h1 tag with basic styling:

<h1 class="text-3xl font-bold m-4">Level Up your Web Dev Skills, visit <a href="https://coding-space.vercel.app" target="_blank">CodingSpace</a></h1>

We should see something like this:

Gradient Underline Plain

Now, let’s add a gradient background to the anchor tag. Add the Tailwind CSS background gradient classes like this:

<h1 class="text-3xl font-bold m-4">Level Up your Web Dev Skills, visit <a href="https://coding-space.vercel.app" target="_blank" class="bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500">CodingSpace</a></h1>

You should see something like this:

Gradient Underline Background On One Word

Let’s give width and height to the background gradient. We’re going to use an arbitrary background-size value like bg-[length:100%_6px] to give a width of 100% and height of 6px. If you’re unfamiliar with arbitrary values, you can refer to the Tailwind CSS documentation to learn more about them.

We also need to add the bg-no-repeat class to prevent the gradient background from repeating:

<h1 class="text-3xl font-bold m-4">Level Up your Web Dev Skills, visit <a href="https://coding-space.vercel.app" target="_blank" class="bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500 bg-[length:100%_6px] bg-no-repeat">CodingSpace</a></h1>

Now, you should see something like this:

Gradient Background With Underline On Top

The last thing we need to do is change the position of this background to the bottom using the bg-bottom class:

<h1 class="text-3xl font-bold m-4">Level Up your Web Dev Skills, visit <a href="https://coding-space.vercel.app" target="_blank" class="bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500 bg-[length:100%_6px] bg-no-repeat bg-bottom">CodingSpace</a></h1>

You can now see the gradient underline under the text!

See the Pen
Tailwind CSS Underline Gradient
by Rishi Purwar (@rishi111)
on CodePen.

How to animate gradients in Tailwind CSS

Animating in TailwindCSS can add fun and meaningful interactions to your projects! In this section, we’ll learn how to animate gradients in Tailwind CSS on hover and focus states to create beautiful animation effects. Essentially, we’ll animate the components we’ve already created in this article so far.

Button gradient background animation

First, we’ll see how to animate the background of the button component we’ve already built. Copy and paste the final code from the button border gradient section:

<button class="m-4 p-1 rounded-full bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500">
  <span class="block text-black px-4 py-2 font-semibold rounded-full bg-white">Follow Me</span>
</button>

To add a gradient background on hover state, we need to use the Tailwind CSS hover: pseudo-class. On hover state, we’ll make the background of the span element transparent using the bg-transparent class. We also need to add the transition-colors class to make the transition smooth. Go ahead and those classes:

<button class="m-4 p-1 rounded-full from-rose-400 via-fuchsia-500 to-indigo-500 bg-gradient-to-r">
  <span class="block text-black px-4 py-2 font-semibold rounded-full bg-white hover:bg-transparent hover:text-white transition">Follow Me</span>
</button>

Now that we’ve added all these classes, you can see the background gradient animation in action in this demo:

See the Pen
Animated Tailwind CSS Gradient Background Button
by Rishi Purwar (@rishi111)
on CodePen.

Input border gradient animation

We’ll now see how to animate the border of an input component. Copy and paste the final code from the input border gradient section:

<div class="m-4 p-1 rounded-full max-w-sm bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500">
  <label for="name" class="sr-only">Name</label>
  <input class="p-3 w-full rounded-full focus:outline-none" type="text" id="name" placeholder="Enter Your Name">
</div>

We’ll add a gradient border around an input on the hover and focus state, and when the input is in a normal state, we’ll use a solid color to create a default border.

Let’s use the hover: and focus-within: classes, and I’ll first briefly explain focus-within pseudo-class if you don’t know about it.

We use the focus-within pseudo-class to style the element when it (or one of its child elements) is in a focus state. In our case, we want to add a gradient border when div has a hover state or our input (child) has a hover or focus state. Let’s add the hover: and focus-within: pseudo-classes:

<div class="m-4 p-1 rounded-full max-w-sm hover:bg-gradient-to-r focus-within:bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500">
  <label for="name" class="sr-only">Name</label>
  <input class="p-3 w-full rounded-full focus:outline-none" type="text" id="name" placeholder="Enter Your Name">
</div>

We can see the border gradient animation now that we’ve added hover: and focus-within:!

Now, let’s add a normal border to this input. To do that, add these classes border border-fuchsia-500 to the input element:

<div class="m-4 p-1 rounded-full max-w-sm hover:bg-gradient-to-r focus-within:bg-gradient-to-r focus from-rose-400 via-fuchsia-500 to-indigo-500">
  <label for="name" class="sr-only">Name</label>
  <input class="p-3 w-full rounded-full border border-fuchsia-500 focus:outline-none" type="text" id="name" placeholder="Enter Your Name">
</div>

You should see something like this:

Enter Name Button Two

Uh oh, there is a problem. This default border remains even when input or div is in a hover or focus state. To hide that, we need to add a border-transparent class to make it invisible on the hover or focus state. Go ahead and add the highlighted classes:

<div class="m-4 p-1 rounded-full max-w-sm hover:bg-gradient-to-r focus-within:bg-gradient-to-r focus from-rose-400 via-fuchsia-500 to-indigo-500">
  <label for="name" class="sr-only">Name</label>
  <input class="p-3 w-full rounded-full border border-fuchsia-500 focus:outline-none focus:border-transparent hover:border-transparent" type="text" id="name" placeholder="Enter Your Name">
</div>

You can see the final border gradient animation in action in this demo:

See the Pen
Tailwind CSS Input with Animated Border Gradient
by Rishi Purwar (@rishi111)
on CodePen.

Gradient underline animation

In this section, we’ll see how to add a gradient underline animation in Tailwind CSS. First, let’s quickly copy and paste the final code from the gradient underline section:

<h1 class="text-3xl font-bold m-4">Level Up your Web Dev Skills, visit <a href="https://coding-space.vercel.app" target="_blank" class="bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500 bg-no-repeat bg-bottom bg-[length:100%_6px]">CodingSpace</a></h1>

We’ll animate the underline so that its height will increase from bottom to top. It’ll cover the height of the text when we hover over it.

The key here is that we need to change an underline gradient height on hover. We now have a fixed height of 6px, and, to animate it, need to change its height to 100% on the hover state.

To get this effect, let’s add the bg-[length:100%_100%] class to an anchor tag on the hover state. We also need to add the transition-[background-size] class to make the transition smooth. Go ahead and add these classes:

<h1 class="text-3xl font-bold m-4">Level Up your Web Dev Skills, visit <a href="https://coding-space.vercel.app" target="_blank" class="bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500 bg-no-repeat bg-bottom bg-[length:100%_6px] hover:bg-[length:100%_100%] transition-[background-size]">CodingSpace</a></h1>

You can see the final underline gradient animation in the demo below.

See the Pen
Tailwind CSS Animated Underline Gradient
by Rishi Purwar (@rishi111)
on CodePen.

And with that, this tutorial is now complete! I hope you’ve learned a lot about how Tailwind CSS can be used to create a variety of gradient combinations.

Conclusion

To conclude, Tailwind CSS makes adding beautiful gradients to your websites easy and is a great tool to have in your developer’s belt!

I hope that you enjoyed this tutorial on how to add gradients with Tailwind CSS. But why stop there? I encourage you to play around with gradients in Tailwind CSS and create your own gradient custom snippets and share them with the rest of us in the comments below!

As always, if you have questions or comments, feel free to leave them below. I’ll get back to you as soon as I can. Thanks for reading!🙏

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.https://logrocket.com/signup/

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web and mobile apps — .

Rishi Purwar I'm an enthusiastic full-stack Web developer from India who has been building side projects for quite some time now. You can check out all my projects at github.com/rishipurwar1 to learn more about what I do!

Leave a Reply