<p class="gradient animate">
  The quick brown fox jumps over the lazy dog
</p>
@keyframes animateGradient {
  0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

body {
  width: 100vw; height: 100vh;
  display: grid;
  place-items: center;
  font-family: sans-serif;
  background-color: #222;
  --gradient: linear-gradient(
    45deg,
    #95f7d0,
    #63b9be,
    #887dc5,
    #d478ff,
    #ff94e7,
    #fec6c0,
    #fdff94,
    #b6f9bd
  );
  
  font-size: 3rem;
  font-weight: bold;
}

.gradient {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: var(--gradient);
}

.animate {
  background-size: 400% 400%;
  animation: animateGradient 5s ease infinite;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.