<div id="main" class="container lead-red">
  HAPPY PRIDE MONTH
</div>
$transition-duration: 700ms;

$red: red;
$orange: orange;
$yellow: yellow;
$green: green;
$blue: blue;
$purple: purple;

.container {
  font-size: 6em;
  font-weight: 800;
  font-family: Arial, sans-serif;
  text-align: center;
  top: 0;
  padding: 0.5em;
  background: linear-gradient(80deg, $red, $orange, $yellow, $green, $blue, $purple);
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: rainbow 5s linear infinite;
}

@keyframes rainbow {
  0%, 100% {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 0;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.