How to create an animated background gradient with Tailwind CSS

Hello everyone! Hope you are having a great Monday. Today, we will be creating an animated background gradient using Tailwind CSS.

What is an animated background gradient?

An animated background gradient is a gradient that moves or changes color over time. It is often used to create a sense of movement or to add a dynamic element to a design.

Let’s get started with the markup

Was mentioned, we will be using Tailwind CSS and custom CSS to create the animated background gradient.

The background layer

The background layer is the first layer of the gradient. It is usually a solid color or a gradient that covers the entire background of the page. In this case, we will be using a gradient that moves from blue to indigo to cyan.

• absolute: This is a utility class that makes an element positioned absolutely.
• inset-0: This is a utility class that sets the top, right, bottom, and left properties to 0.
• bg-gradient-to-br: This is a utility class that sets the background gradient to a linear gradient that starts at the bottom right corner of the element and ends at the top left corner.
• from-blue-400: This is a utility class that sets the starting color of the gradient to blue.
• via-indigo-500: This is a utility class that sets the color that is blended with the starting color of the gradient to indigo.
• to-cyan-500: This is a utility class that sets the color that is blended with the starting color of the gradient to cyan.

Utilities classes:

• animate-gradient: This is a utility class that applies the gradient animation to the background layer.
• bg-[length:400%_400%]: This is a utility class that sets the background size to 400% and 400%.

<div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-indigo-500 to-cyan-500 animate-gradient bg-[length:400%_400%]"></div>

The overlay patterns

The overlay patterns are the second layer of the gradient. They are usually a solid color or a gradient that covers the entire background of the page. In this case, we will be using a gradient that moves from white to yellow.

The wrapper

• absolute: This is a utility class that makes an element positioned absolutely.
• inset-0: This is a utility class that sets the top, right, bottom, and left properties to 0.
• opacity-30: This is a utility class that sets the opacity of the element to 30%.

Teh first overlay pattern

• absolute: This is a utility class that makes an element positioned absolutely.
• top-0: This is a utility class that sets the top property to 0.
• left-0: This is a utility class that sets the left property to 0.
• w-96: This is a utility class that sets the width of the element to 96.
• h-96: This is a utility class that sets the height of the element to 96.
• bg-white: This is a utility class that sets the background color of the element to white.
• rounded-full: This is a utility class that sets the border radius of the element to full.
• mix-blend-overlay: This is a utility class that sets the mix-blend-mode of the element to overlay.
• filter: This is a utility class that sets the filter of the element.
• blur-3xl: This is a utility class that sets the blur of the element to 3xl.
• animate-pulse: This is a utility class that applies the pulse animation to the element.

The second overlay pattern

• absolute: This is a utility class that makes an element positioned absolutely.
• bottom-0: This is a utility class that sets the bottom property to 0.
• right-0: This is a utility class that sets the right property to 0.
• w-96: This is a utility class that sets the width of the element to 96.
• h-96: This is a utility class that sets the height of the element to 96.
• bg-yellow-300: This is a utility class that sets the background color of the element to yellow.
• rounded-full: This is a utility class that sets the border radius of the element to full.
• mix-blend-overlay: This is a utility class that sets the mix-blend-mode of the element to overlay.
• filter: This is a utility class that sets the filter of the element.
• blur-3xl: This is a utility class that sets the blur of the element to 3xl.
• animate-pulse: This is a utility class that applies the pulse animation to the element.

<div class="absolute inset-0 opacity-30">
  <div class="absolute top-0 left-0 w-96 h-96 bg-white rounded-full mix-blend-overlay filter blur-3xl animate-pulse"></div>
  <div class="absolute bottom-0 right-0 w-96 h-96 bg-yellow-300 rounded-full mix-blend-overlay filter blur-3xl animate-pulse"></div>
</div>

This is how the markup should look like when you have it ready

<!-- Background layer -->
<div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-indigo-500 to-cyan-500 animate-gradient bg-[length:400%_400%]"></div>
<!-- Overlay patterns -->
<div class="absolute inset-0 opacity-30">
  <div class="absolute top-0 left-0 w-96 h-96 bg-white rounded-full mix-blend-overlay filter blur-3xl animate-pulse"></div>
  <div class="absolute bottom-0 right-0 w-96 h-96 bg-yellow-300 rounded-full mix-blend-overlay filter blur-3xl animate-pulse"></div>
</div>

Let’s get started with the CSS

We will be using Tailwind CSS and custom CSS to create the animated background gradient. We will be using the @keyframes and animation utilities to create the animation. The @keyframes utility allows us to define keyframes, which are the points in the animation where the styles change. The animation utility allows us to define the animation itself, including the keyframes and the timing function.

The keyframes

• @keyframes gradient-shift: This is a rule that defines a keyframe animation called gradient-shift.
• 0%: This is a keyframe that defines the styles for the animation at 0% of the animation.
• 50%: This is a keyframe that defines the styles for the animation at 50% of the animation.
• 100%: This is a keyframe that defines the styles for the animation at 100% of the animation.
• background-position: This is a property that sets the background position of the element.

@keyframes gradient-shift {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

Animating the gradient

• animation: gradient-shift 15s ease infinite;: This is a property that applies the gradient-shift animation to the element.

.animate-gradient {
	animation: gradient-shift 15s ease infinite;
}

This is how the CSS should look like when you have it ready

@keyframes gradient-shift {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

.animate-gradient {
	animation: gradient-shift 15s ease infinite;
}

Now, let’s add it to tailwind.config.js

Some of us, prefer to add it to the tailwind.config.js file., so let’s do that. We will be using the extend option to add the keyframes and the animation. The keyframes option allows us to define keyframes, which are the points in the animation where the styles change.

The keyframes

• extend: This is an option that allows us to extend the default Tailwind CSS configuration.
• keyframes: This is an option that allows us to define keyframes.
• gradient-shift: This is a keyframe animation that defines the keyframes for the gradient shift animation.
• 0%, 100%: This is a keyframe that defines the styles for the animation at 0% and 100% of the animation.
• background-position: This is a property that sets the background position of the element.

The animation

• animation: { 'gradient': 'gradient-shift 15s ease infinite' };: This is a property that applies the gradient-shift animation to the element.

module.exports = {
  theme: {
    extend: {
      keyframes: {
        'gradient-shift': {
          '0%, 100%': { backgroundPosition: '0% 50%' },
          '50%': { backgroundPosition: '100% 50%' },
        }
      },
      animation: {
        'gradient': 'gradient-shift 15s ease infinite',
      }
    },
  },
  plugins: [],
}

Conclusion

This is a simple animated background gradient that demonstrates how to use Tailwind CSS and custom CSS to create an animated background gradient with a predefined set of colors. It’s a great starting point for building more complex animated background gradients.

Hope you enjoyed this tutorial and have a great day!