9+ best ways to stand out with Tailwind gradients in 2023

How to Add Gradients with Tailwind CSS: A Comprehensive Guide

Gradients are a powerful way to add vibrant and eye-catching elements to your website. With Tailwind CSS, you can easily create beautiful background gradients, text gradients, border gradients, and more. In this comprehensive guide, we'll cover everything you need to know about adding gradients with Tailwind CSS, including how to control the direction, customize color stops, and animate gradients. Let's get started!

Introduction to Tailwind CSS Gradients and how do you set up a gradient?

Gradients can be applied to various elements in your website, including backgrounds, text, borders, and more. Before we dive into the coding part, let's understand the basics of Tailwind CSS gradients and how they work.

Controlling the Direction of the Gradient

There are 3 main gradient directions in Tailwind:

1. Linear Tailwind gradient

   

2. Radial Tailwind gradient

   

3. Conic Tailwind gradient

   

By default, Tailwind CSS doesn't provide direct classes for radial and conic gradients, but later we will cover how to deal with that. In Tailwind CSS, linear gradients are created using the following three classes:

• bg-gradient-to-{direction}: Defines the direction of the gradient. The direction can be horizontal, vertical, or diagonal.

  • For horizontal linear gradient: bg-gradient-to-r (left to right) and bg-gradient-to-l (right to left).

  • For vertical linear gradient: bg-gradient-to-t (bottom to top) and bg-gradient-to-b (top to bottom).

  • For diagonal linear gradient: bg-gradient-to-tr, bg-gradient-to-tl, bg-gradient-to-br, and bg-gradient-to-bl.

• from-{color}: Defines the starting color of the gradient.

• to-{color}: Defines the ending color of the gradient.

Table of possible directions

Of the gradient in Tailwind:

How do you write a linear gradient in Tailwind CSS?

Let's start by creating a linear background gradient.

<div className="h-36 bg-gradient-to-r from-yellow-600 to-blue-600"></div>

<div className="h-36 bg-gradient-to-b from-yellow-600 to-blue-600"></div>

Play with the directions and choose what best fits your needs.

Customizing Tailwind CSS Gradients with More Color Stops

To make gradients more colorful and vibrant, you can add additional color stops. Tailwind CSS provides the via-{color} class for adding a middle color in the gradient. Here's how you can do it:

<div className="h-36 bg-gradient-to-r from-yellow-600 via-pink-600 to-blue-600"></div>

This code creates a gradient with three color stops: yellow, pink, and blue.

Adding Radial Background Gradients

By default, Tailwind CSS doesn't provide direct classes for radial gradients, but you can easily add support for them in two ways.

1. First, add the following code to your tailwind.config.js file:

    module.exports = {
      theme: {
        extend: {
          backgroundImage: {
            'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
          },
        },
      },
    };
   

   Now you can create a radial background gradient like this:

    <div className="h-36 bg-gradient-radial from-yellow-600 via-pink-600 to-blue-600"></div>
   

   

2. The second way is to replace the existing bg-gradient-radial class with bg-[radial gradient(ellipse_at_center,_var(--tw-gradient-stops))].

   You can customize the ellipse_at_center to achieve different effects, there are many possible values. Below is the table of possibilities:

Adding Conic Background Gradients

Tailwind CSS doesn't have direct classes for conic gradients either, but you can

1. First, add the following code to your tailwind.config.js file. You can customize the values from 180deg at 50% 50% to best fit your design needs.

        extend: {
          backgroundImage: {
            'gradient-conic':
              'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
          },
         }
   

   Then, inside your JSX code, you can do the following:

    <div className="h-36 bg-gradient-conic from-yellow-600 via-pink-600 to-blue-600"></div>
   

   

2. Second way is to use the square bracket notation to create them dynamically. Here's an example:

    <div className="h-36 bg-[conic-gradient(#F79256,#77D970,#8E44AD)]"></div>
   

   

How to make gradient text with Tailwind CSS

Text gradients can add vibrancy to your text elements. However, you need to use some extra classes to make them work. Here's an example on how you can create a gradient text effect:

<h1 className="text-5xl p-4 text-center font-bold bg-gradient-to-r from-yellow-600 via-pink-600 to-blue-600 bg-clip-text text-transparent">
  Step-by-step guide on how to add Gradients with Tailwind CSS
</h1>

How to Add Gradient Borders in Tailwind CSS

Let's explore how to add gradient borders to elements like buttons, inputs, and cards.

Button Border Gradient

The idea is to create 2 elements and apply the bg-white class to the element in front. Here is an example:

<button className="m-4 p-1 rounded-full bg-gradient-to-r from-yellow-600 via-pink-600 to-blue-600">
        <span className="block text-black px-10 py-3 rounded-full bg-white">
          Add to cart
        </span>
</button>

Input Border Gradient

<div className="m-6 p-1 bg-gradient-to-r from-yellow-600 via-pink-600 to-blue-600">
        <input
          type="text"
          className="p-2 w-full bg-white placeholder:text-black"
          placeholder="Type your name..."
        />
</div>

Card Border Gradient

<div className="m-4 p-2 shadow-lg bg-gradient-to-r from-yellow-600 via-pink-600 to-blue-600">
        <div className="bg-white">
          <h3 className="text-2xl font-bold mb-2 pt-4 pl-10">Featured Card</h3>
          <p className="pl-10 pb-4">
            This is a card with a gradient border.
          </p>
        </div>
</div>

Adding Gradient Animations

Gradients can be made even more engaging with animations. To create a gradient animation, you can use CSS keyframes, here is an example:

1. Add this to your globals.css file:

    @keyframes pulseAnimation {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0.6;
      }
      100% {
        opacity: 1;
      }
    }
   
    .animated-gradient {
      animation: pulseAnimation 2s ease-in-out infinite;
    }
   

2. Add this to your JSX component:

    <div className="h-36 bg-gradient-to-r from-yellow-600 via-pink-600 to-blue-600 animated-gradient"></div><style>
   

Conclusion

Gradients are a fantastic way to add personality and excitement to your website's design. With Tailwind CSS, you have full control over creating various types of gradients, including background gradients, text gradients, border gradients, and even gradient animations. So go ahead and experiment with different colors and styles to make your website stand out!

Remember to check the Tailwind CSS documentation for more customization options and utility classes.

Happy coding!