Nice text-effect demo by Shireen Taj:
~
Using DevTools you can see that there’s a gradient background set onto the element.
By also applying -webkit-background-clip: text; the gradient is only shown on the text itself.
~
The demo’s also fun to fork and remix:
Add some Houdini to animate it
See the Pen Multi Colored Text with CSS (Animated with Houdini) by Bramus (@bramus) on CodePen.
Change the type of gradient
Rad fork by Adam Argyle:
See the Pen Multi Colored Text with CSS by Adam Argyle (@argyleink) on CodePen.
Make the center follow the mouse
This one uses a tad of JS to update the Custom Properties:
See the Pen Multi Colored Text with CSS (conic gradient + follow mouse) by Bramus (@bramus) on CodePen.
Using a radial-gradient which gets a bit bouncy
See the Pen Multi Colored Text with CSS (radial gradient + follow mouse) by Bramus (@bramus) on CodePen.
Creating a CSS flashlight
It steers away from the multi-color aspect, but the rest of the code is the same:
See the Pen CSS Flashlight Text by Bramus (@bramus) on CodePen.
~