CSS Background Gradient - HTML CSS CSS Property

HTML CSS examples for CSS Property:background

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. background

Description

CSS Background Gradient

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.background{position:absolute;top:0px;right:0px;bottom:0px;left:0px; z-index: -1;}
.awesomeBG {<!--   w  ww. j  a v a 2s .  com-->
   background: linear-gradient(to left, #165730, #185a9d, #165730, #185a9d, #165730);
   background-size: 600% 100%;
   animation: AwesomeBG 10s ease infinite;
   overflow: hidden;
}
@keyframes AwesomeBG {
   0% { background-position:0 0 }
   5% { background-position:8% 0 }
   13% { background-position:15% 0 }
   19% { background-position:23% 0 }
   25% { background-position:30% 0 }
   31% { background-position:38% 0 }
   38% { background-position:45% 0 }
   44% { background-position:53% 0 }
   50% { background-position:60% 0 }
   56% { background-position:68% 0 }
   63% { background-position:75% 0 }
   69% { background-position:83% 0 }
   75% { background-position:90% 0 }
   81% { background-position:98% 0 }
   88% { background-position:105% 0 }
   94% { background-position:113% 0 }
   100% { background-position:120% 0 }
}


      </style> 
 </head> 
 <body> 
  <div class="background awesomeBG"></div>  
 </body>
</html>

Related Tutorials