CSS Text Color-Gradient

by s_light

HTML

<p>
Enter your message here...
To be or not to be, 
that is the question...
maybe, I think, 
I'm not sure
wait, you're still reading this?
Type a good message already!
</p>

CSS

body {
    background-color: rgb(100, 200, 240);
}

p {
  width: 300px;
  position: relative;
  background-color: transparent;
}

p::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, red, orange, yellow, green, blue, purple);
  mix-blend-mode: screen;
  isolation: isolate;
}