CSS Background Linear Gradient Animation

Spread the love

There is no doubt that gradient colors and animations are the key elements of an attractive web design. These elements not only provide an attractive design but also enhance the user’s experience. Basically, there are multiple ways of using gradient colors to make an element more beautiful. But the use of gradient color as the background looks more eye-catchy. So, in this tutorial, I’m going to explain how to create a linear gradient background animation using HTML and CSS.

Here, I will explain an easy method to create a gradient background for the body element and apply CSS keyframes to animate it. But you are not limited to using this animated gradient background for the body. You can integrate this to any element on the webpage including buttons, sections, inputs, and active elements. Similarly, you can reveal gradient background animation on hover or click events.

Before going further, I would suggest you browse the demo page to see what gradient background looks like. The direction of linear-gradient colors can be set to any angle. Thus, it will move in that direction with infinite playing. Similarly, you can set custom gradients colors matching with your website template. The speed of the animation is also in your control. You can increase or decrease it according to your needs.

The HTML Code

In HTML, you just need to add a class "gradient_bg" to the element on which you want to apply linear gradient background animation. In my case, I’m adding this class name to the body element. If you want to apply to other elements, add this class name to that element.

<body class="gradient_bg">
<!-- Your content goes here -->
</body>

Don’t worry, follow the same method if you want to apply this animation to hover events. We’ll discuss next how you can reveal gradient background animation on hover or click events.

CSS for Background Linear Gradient Animation

In CSS, select the "gradient_bg" class and define the background property with linear-gradient color value. Inside the gradient color set, you need to define at least two color stops along with the direction. You can set as many colors as you want. Similarly, define the background-size 4x larger than the element to display a few colors in a single view. The others color will display when the background-position will be changed in animation keyframes.

The height property is optional, you only need to define it if the element doesn’t have enough content. The animation property defines the gradient movements. Specify animation property with "gradient 15s ease infinite" value. The complete CSS snippet for the gradient_bg class is as follows:

.gradient_bg {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	-webkit-animation: gradient 15s ease infinite;
	        animation: gradient 15s ease infinite;
	height: 100vh;
}

If you want to reveal gradient background animation hover event, use the hover pseudo-selector for gradient_bg class and call the animation as follows:

.gradient_bg:hover{
   -webkit-animation: gradient 15s ease infinite;
   animation: gradient 15s ease infinite;
}

In the above CSS, you can set the custom value for the iteration-count and timing function for the animation.

Finally, define the CSS keyframes for the gradient background animation. In the animation, you just need to set different background positions as follows:

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

That’s all! I hope you have successfully integrated this gradient background animation into your project. If you have any questions or suggestions, let me know by comment below.

Share it!

You May Also Like

2 thoughts on “CSS Background Linear Gradient Animation”

    • Hi Sunaina!
      Thanks for your feedback. Keep visiting us for more free HTML, CSS coding tutorials.

Leave a Comment