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;
}