How to write Pure CSS Gradient Background Animation

Pure css gradient background animation | Here is a demonstration using only CSS to animate a gradient background. Places like hero sections, cards, and hover states of buttons can all benefit from this animation. They will appear alive and catch users’ attention thanks to this animation.

Using this application, you can make your own unique, animated backdrop gradients. This tool also produced the demo that is seen below. With the parameters in the tool below, you may select any number of colours, as well as the direction and time of the animation.

HTML Code

<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>

CSS Code

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%;
	}
}

10 best examples of parallax scrolling effects

Download: FileBird WordPress Media Library Folders Free Download 2022