<div class="gradient-pattern"></div>
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%;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.