Victor Yoalli

Introduction

Tailwind CSS brought us new functionalities: Animations in version 1.6.0 and Gradients on version 1.70. Thanks to these, we are now able to animate a gradient without any custom CSS styles.

We will learn how to implement gradients, creating a custom animation to use for our gradient backgrounds.

Prerequisites

We need a project with Tailwind CSS v1.7.0 or greater installed.
Basic CSS knowledge.

Gradient Hero Section

Let's start creating a simple hero section for our web site.

Our hero section will be a div with a title in the center.

We start creating a div tag with a height of 64 units h-64. We also want to center the title. We do this using flex for the example: flex items-center justify-center.

<div class="flex 
items-center
justify-center 
h-64"><h1 class="text-white text-3xl font-semibold">Animated Gradient Using Tailwind CSS</h1>
</div>

Now let's create the gradient there are 4 instructions that we can use:

Direction

We have 9 options:

bg-gradient-none
bg-gradient-to-t (to top),
bg-gradient-r (to right),
bg-gradient-to-tr (to top right),
bg-gradient-to--b (to bottom),
bg-gradient-to-br (to bottom right)),
bg-gradient-to-l (to left),
bg-gradient-to-bl (to bottom left),
bg-gradient-to-l (to top left).

Start Color Stop

To specify the starting stop color for our gradient, we use from-{color}

For example: from-blue-400.

End Color Stop

To specify the end stop color, we use to-{color}. For example: to-orange-500.

Middle Color Stop

The middle stop color is optional, and is used via-{color} For example: via-pink-500.

<div class="flex items-center justify-center h-64  
bg-gradient-to-r 
from-blue-400 
to-orange-500 
via-purple-500
"><h1 class="text-white text-3xl font-semibold">Animated Gradient Using Tailwind CSS</h1>
</div>

Creating a Custom Animation for our Gradient

To create a custom animation we will be using tailwind.config.js file.

I want to have there options when animating my gradient, one moving in the horizontal axis x. Another one moving on the vertical axis y, and finally one moving diagonal that we will call xy.

We add this code to the theme > extend section of our tailwind.config.js file.

theme: {
    extend: {
        'animation': {
            'gradient-x':'gradient-x 15s ease infinite',
            'gradient-y':'gradient-y 15s ease infinite',
            'gradient-xy':'gradient-xy 15s ease infinite',
        },
        'keyframes': {
            'gradient-y': {
                '0%, 100%': {
                    'background-size':'400% 400%',
                    'background-position': 'center top'
                },
                '50%': {
                    'background-size':'200% 200%',
                    'background-position': 'center center'
                }
            },
            'gradient-x': {
                '0%, 100%': {
                    'background-size':'200% 200%',
                    'background-position': 'left center'
                },
                '50%': {
                    'background-size':'200% 200%',
                    'background-position': 'right center'
                }
            },
            'gradient-xy': {
                '0%, 100%': {
                    'background-size':'400% 400%',
                    'background-position': 'left center'
                },
                '50%': {
                    'background-size':'200% 200%',
                    'background-position': 'right center'
                }
            }
        }
    }
}

Implementing

To implement our just created animation to our previous gradient example we add the animate-gradient-x

<div class="flex items-center justify-center h-64  
bg-gradient-to-r 
from-blue-400 
to-orange-500 
via-purple-500
animate-gradient-x
">

That's all that is needed to have an animated gradient.

Conclusion

We can create more animations and probably an improvement would be to be able to create a utility for the duration of our animation.

The direction of our animation might depend on your likes and how do you have the gradient direction configured.

Let me know what you think!

How to create an Animated Gradient using Tailwin CSS