Multi Colored Text with CSS

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.

~

About the author

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.