<div class="d-flex flex-column justify-content-center w-100 h-100">

  <div class="d-flex flex-column justify-content-center align-items-center">
    <h1 class="fw-light text-white m-0">Pure CSS Gradient Background Animation</h1>
    <div class="btn-group my-5">
      <a href="https://codepen-api-export-production.s3.us-west-2.amazonaws.com/zip/PEN/pyBNzX/1578778289271/pure-css-gradient-background-animation.zip" class="btn btn-outline-light" aria-current="page"><i class="fas fa-file-download me-2"></i> SOURCE CODE</a>
      <a href="https://codepen.io/P1N2O/full/pyBNzX" class="btn btn-outline-light">FULL SCREEN <i class="fas fa-expand ms-2"></i></a>
    </div>
    <a href="https://manuel.pinto.dev" class="text-decoration-none">
      <h5 class="fw-light text-white m-0">— Pen by Manuel Pinto —</h5>
    </a>
  </div>
</div>
</div>
body {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  height: 100vh;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
// https://manuel.pinto.dev

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.