Rainbow text color in CSS

No images, this is pure CSS.

This is really funny. You can have rainbow text on gradient background purely in CSS. No images needed.
And yes, you can have radial background too. On a long text in looks funny and cool. Look, how awesome (and weird) it is. Mystical colors.

And here is the trick how to do it:

Combine background-image property with background-clip. Not much code required. Small caveat – don’t forget to specify ::selection too, otherwise selected text may not be visible.

/** rainbow letters */
 .rainbow-demo {
     background-image: linear-gradient(to left, violet, indigo, blue, green, #CCCC00, orange, red);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;

 .rainbow-demo::selection {
     color: #b400ff;
     -webkit-text-fill-color: #b400ff;
Taste the rainbow and be happy