Pure CSS Gradient Background Animation

Here is a demo with CSS code for gradient background animation using CSS only. This animation can prove valuable in places like hero sections, cards, and hover states of buttons. This animation will make them look alive and attract user attention.

You can create your own custom background animated gradients with this tool. The demo below is also created by this tool. You can choose any number of colors of your choices, set animation direction and animation timings with the settings in the tool below.

Tool Link – https://tools.webdevpuneet.com/css-animated-gradient-generator/ 

---

DEMO

Open demo in a full window – https://demos.webdevpuneet.com/css/animated-gradient-background/index.html

Demo HTML

<h1 class="text-light">Pure CSS Animated Gradient Background</h1>

Demo CSS

body {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 5s ease infinite;
}

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

Tool Link – https://tools.webdevpuneet.com/css-animated-gradient-generator/