How to create CSS background gradient animation

Creative CSS Effects | February 20, 2022

Today in this blog you’ll learn how to create CSS background gradient animation. We used HTML and CSS to create this ping pong ball animation with background gradient.

Video tutorial of How to create CSS background gradient animation

This tutorial video can help you to create CSS background gradient animation

How to create CSS background gradient animation [Source Codes]

This source code can help you to create CSS background gradient animation.

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="wrapper">
	
</div>

</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #fff;
	color: #000;
}
.wrapper{
	width: 100%;
	height: 100vh;
	background-image: 
	radial-gradient(circle,#ff0fd6 69%, transparent 72%),
	radial-gradient(circle,#00ff22 69%, transparent 72%),
	linear-gradient(to right bottom, #00b8ff, #210068);
	background-size: 10vw 10vw, 10vw 10vw, 100% 100%;
	background-repeat: no-repeat;
	background-position: left top, right top, left top; 

	animation: bgAnim 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes bgAnim{
	0%{
		background-image: 
		radial-gradient(circle,#ff0fd6 69%, transparent 72%),
		radial-gradient(circle,#00ff22 69%, transparent 72%),
		linear-gradient(to right bottom, #00b8ff, #210068);
		background-size: 10vw 10vw, 10vw 10vw, 100% 100%;
		background-repeat: no-repeat;
		background-position: -10vw -10vw, 100vw -10vw, left top; 
	}
	35%{
		background-image: 
		radial-gradient(circle,#ff0fd6 69%, transparent 72%),
		radial-gradient(circle,#00ff22 69%, transparent 72%),
		linear-gradient(to right bottom, #00b8ff, #210068);
		background-size: 10vw 10vw, 10vw 10vw, 100% 100%;
		background-repeat: no-repeat;
		background-position: 30vw calc(100vh - 10vw), 60vw calc(100vh - 10vw), left top; 
	}
	70%{
		background-image: 
		radial-gradient(circle,#ff0fd6 69%, transparent 72%),
		radial-gradient(circle,#00ff22 69%, transparent 72%),
		linear-gradient(to right bottom, #00b8ff, #210068);
		background-size: 10vw 10vw, 10vw 10vw, 100% 100%;
		background-repeat: no-repeat;
		background-position: 60vw 0, 30vw 0, left top; 
	}
	100%{
		background-image: 
		radial-gradient(circle,#ff0fd6 69%, transparent 72%),
		radial-gradient(circle,#00ff22 69%, transparent 72%),
		linear-gradient(to right bottom, #00b8ff, #210068);
		background-size: 10vw 10vw, 10vw 10vw, 100% 100%;
		background-repeat: no-repeat;
		background-position: 100vw 100vh, -10vw 100vh, left top; 
	}
}