<div class="background">
  <h1 class="title">Gradient Animation</h1>
</div>
@keyframes moveGradient {
    0% {
      background-position: 0% 50%;
    }
    100% {
      background-position: 100% 50%;
    }
  }

  .background {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(270deg, #4a90e2, #50e3c2, #9013fe, #f5a623);
    background-size: 400% 400%;
    animation: moveGradient 5s ease infinite;
    font-family: Arial, sans-serif;
    color: white;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  }

  .title {
    font-size: 3rem;
    text-align: center;
  }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.