Animated Background Gradient

animated-background-gradient.markdown

Animated Background Gradient

Animation background gradient effect.

A Pen by katmai7 on CodePen.

License.

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

$bgWidth: 10000px;
body {
  background: linear-gradient(to right, #1e5799 0%,#2ce0bf 19%,#76dd2c 40%,#dba62b 60%,#e02cbf 83%,#1e5799 100%); 
  background-size: $bgWidth 100%;
  animation: bg 15s linear infinite ;
}

@keyframes bg{
  0%{
    background-position-x: 0;
  }
  
  100%{
    background-position-x: $bgWidth;
  }
}