Сборник анимированных градиентов

body {
	background: linear-gradient(90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
	transform: translate3d(0, 0, 0);
}

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

body {
	background: linear-gradient(180deg, #641e39, #98749b, #ddf810, #8f4ff4);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
}

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

body {
	background: linear-gradient(-45deg, #ed193b, #a98055, #f286e2, #681d7a);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
}

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

body {
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 1rem, #ccc 1rem, #ccc 2rem);
	background-size: 200% 200%;
	animation: gradient 10s linear infinite;
}

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

body {
	background: linear-gradient(#FF3155 0%, #FF3155 25%, #FFAF42 25%, #FFAF42 50%, #FFED5E 50%, #FFED5E 75%, #2DAEFD 75%);
	bakground-position: 100px 100vh;
	background-repeat: repeat-y;
	background-position: 0px 0px;
	animation: gradient 10s infinite linear;
}

@keyframes gradient {
	to {
		background-position: 0 1000px;
	}
}