Pure CSS Gradient Background Animation | CSS Gradient Background - codewithrandom

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

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



Pure CSS Gradient Background Animation | CSS Gradient Background - codewithrandom

Pure CSS Gradient Background Animation | CSS Gradient Background - codewithrandom

Pure CSS Gradient Background Animation | CSS Gradient Background - codewithrandom


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 

Post a Comment

Previous Post Next Post