CSS Gradients: Animated Gradient

css-gradients-animated-gradient.markdown

CSS Gradients: Animated Gradient

A Pen by Matt Daniel Brown on CodePen.

License.

index.html

<div class="gradient-pattern"></div>

style.css

body {
  height: 100vh;
}

.gradient-pattern {
  animation: gradient 4s ease infinite;
  background-image: linear-gradient(135deg, #ff8a00, #e52e71);
  background-size: 400% 400%;
  height: 100%;
  width: 100%;
}

@keyframes gradient {
  0% {
    background-position: 51% 0%;
  }
  50% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 51% 0%;
  }
}