Change background color continuously - HTML CSS CSS Property

HTML CSS examples for CSS Property:background-color

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

Description

Change background color continuously

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Rainbow gradient background animation</title> 
  <style>

.wrapper {<!--  ww  w.  j  ava2s  . c  o  m-->
   height: 100%;
   width: 100%;
   left:0;
   right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
   background: linear-gradient(124deg, #ff2400, #e81d1d, blue, #e3e81d, #1de840, #1ddde8, red, #dd00f3, #dd00f3);
   background-size: 1800% 1800%;
   -webkit-animation: rainbow 18s ease infinite;
   -z-animation: rainbow 18s ease infinite;
   -o-animation: rainbow 18s ease infinite;
   animation: rainbow 18s ease infinite;}
   @-webkit-keyframes rainbow {
      0%{background-position:0% 82%}
      50%{background-position:100% 19%}
      100%{background-position:0% 82%}
   }
   @-moz-keyframes rainbow {
      0%{background-position:0% 82%}
      50%{background-position:100% 19%}
      100%{background-position:0% 82%}
   }
   @-o-keyframes rainbow {
      0%{background-position:0% 82%}
      50%{background-position:100% 19%}
      100%{background-position:0% 82%}
   }
   @keyframes rainbow {
      0%{background-position:0% 82%}
      50%{background-position:100% 19%}
      100%{background-position:0% 82%}
   }


      </style> 
 </head> 
 <body translate="no"> 
  <div class="wrapper"></div>  
 </body>
</html>

Related Tutorials