SOURCE

<div></div>

 
 body{
    background:linear-gradient(-45deg,rgb(187, 255, 0) ,rgb(241, 152, 50) ,blue ,red );
	background-size: 300% 300%;
    animation: animation 10s ease infinite;
	height: 90vh; 
}

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

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

}
} 




/* 

body{
	width: 100%;
	height: 90vh; 
	color: #fff;
	padding: 0;
	margin: 0;
	background: linear-gradient(
		-45deg, 
		rgba(83, 204, 241, 0.8),
		rgba(68,255,175,0.7),
		rgb(251, 145, 113),
		rgba(68,255,201,0.7),
		rgb(31, 230, 41)
	);
	background-size: 400% 400%;
	-webkit-animation: Gradient 20s ease infinite;
	-moz-animation: Gradient 20s ease infinite;
	-moz-animation: Gradient 20s ease infinite;
	animation: Gradient 10s ease infinite;
}
@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-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%
	}
}  */