Pure CSS Gradient Background Animation

index.html

<div class="d-flex flex-column justify-content-center w-100 h-100">

	<div class="d-flex flex-column justify-content-center align-items-center">
		<h1 class="fw-light text-white m-0">Pure CSS Gradient Background Animation</h1>
		<div class="btn-group my-5">
			<a href="https://codepen-api-export-production.s3.us-west-2.amazonaws.com/zip/PEN/pyBNzX/1578778289271/pure-css-gradient-background-animation.zip" class="btn btn-outline-light" aria-current="page"><i class="fas fa-file-download me-2"></i> SOURCE CODE</a>
			<a href="https://codepen.io/P1N2O/full/pyBNzX" class="btn btn-outline-light">FULL SCREEN <i class="fas fa-expand ms-2"></i></a>
		</div>
		<a href="https://manuel.pinto.dev" class="text-decoration-none">
			<h5 class="fw-light text-white m-0">— Pen by Manuel Pinto —</h5>
		</a>
	</div>
</div>
</div>

pure-css-gradient-background-animation.markdown

Pure CSS Gradient Background Animation

A simple and clean gradient background animation using only CSS.

Feel free to re-use, modify or distribute without any attribution!

Cheers!

• Manuel Pinto

A Pen by Manuel Pinto on CodePen.

License.

script.js

// https://manuel.pinto.dev

style.css

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

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

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />