Hello everyone! Hope you are having a great Monday. Today, we will be creating an animated background gradient using Tailwind CSS.
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.
Was mentioned, we will be using Tailwind CSS and custom CSS to create the animated background gradient.
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 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.
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%.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.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>
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.
@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%;
}
}
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;
}
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.
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.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: [],
}
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!
/Michael Andreuzza
"I bought a beautiful theme from Lexington a couple weeks ago. I didn't know Astro at the time, but Michael helped me get set up and really went above and beyond with his support. Now I'm happily redoing my site to look gorgeous with his template."
Stuart
Creator of saasydb.com
"Michael is one of the best designers on Twitter, would highly recommend his Lexington Themes if you want something in tailwind that doesn’t look the same as everyone else!"
Alex Hughes
letsloopin.com
Get lifetime access to every theme available today for $199 and own
them forever. Plus, new themes, lifetime updates, use on unlimited
projects and enjoy lifetime support.
No subscription required!
Beautifully designed HTML, Astro.js and Tailwind themes! Save months of time and build your startup landing page in minutes.