Pure CSS Gradient Background Animation

Welcome to the Codewithrandom blog. In this blog, We learn how to create a Gradient Background Animation. We use HTML and CSS for this Gradient Background Animation.

I hope you enjoy our blog so let’s start with a basic html structure for Gradient Background Animation.

HTML Code For Gradient Background Animation

<h1>Pure CSS Gradient Background Animation</h1>

There is Html Code for the simple Heading in the body tag. Now, you can see output without Css, then we write Css for our Pure Gradient Background Animation.

50+ HTML, CSS & JavaScript Projects With Source Code

Html Code Output

 

CSS Code For Gradient Background Animation

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

Now we have completed our pure CSS Gradient Background Animation. Here is our final updated output HTML + CSS.

Restaurant Website Using HTML And CSS With Source Code

Final Output Pure Gradient Background Animation Using CSS