Pure CSS Gradient Background Animation

Pure CSS Gradient Background Animation

Pure CSS Gradient Background Animation

Pure CSS Gradient Background Animation
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

Pure CSS Gradient Background Animation
Pure CSS Gradient Background Animation

 

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

 

Pure CSS Gradient Background Animation
Pure CSS Gradient Background Animation

 

Pure CSS Gradient Background Animation
Pure CSS Gradient Background Animation

 

Pure CSS Gradient Background Animation
Pure CSS Gradient Background Animation

5+ HTML CSS Projects With Source Code

In this Article, We learn how to create a pure CSS Gradient Background Animation. If we made a mistake or any confusion, please drop a comment to reply or help you learn quickly.

Written by – Code With Random/Anki



Leave a Reply