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
Change the type of gradient
Rad fork by Adam Argyle:
Make the center follow the mouse
This one uses a tad of JS to update the Custom Properties:
Using a radial-gradient which gets a bit bouncy
Creating a CSS flashlight
It steers away from the multi-color aspect, but the rest of the code is the same: