<p class="gradient">
The quick brown fox jumps over the lazy dog
</p>
body {
  width: 100vw; height: 100vh;
  background-color: #222;
  display: grid;
  place-items: center;
  font-family: sans-serif;

  --gradient: linear-gradient(
    45deg,
    #95f7d0,
    #63b9be,
    #887dc5,
    #d478ff,
    #ff94e7,
    #fec6c0,
    #fdff94,
    #b6f9bd
  );
}

p {
  font-size: 3rem;
  font-weight: bold;
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.