Pure CSS Gradient Background Animation | CSS Gradient Background – codewithrandom

Pure CSS Gradient Background Animation | CSS Gradient Background – codewithrandom

 WelcomešŸŽ‰ to Code With Random blog. In this blog, we learn that how to create a Card With Hover Effect. We use HTML & CSS  for this Card With Hover Effect. Hope you enjoy our blog so let’s start with a basic HTML structure for Card With Hover Effect.

HTML Code

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

There is HTML code for the simple heading in body. Now, you can see output without CSS, then we write CSS for our  Background Animation.

Output

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

Now we have completed our CSS section,  Here is our final updated output CSS.

Final Output



Check out more…..




In this post, we learn how to create a  CSS Gradient Background Animation HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Share on:

Leave a Comment