Multi colored text in CSS

How do CSS Text Gradients work?

It might surprise you to know that CSS gradient text is actually done through an unstandardized set of webkit CSS properties. These properties have become so pervasive on the web, that even Firefox supports them now.

Since most other browsers are largely chromium based, gradient text has very broad support in all modern web browsers for a set of non-standardized properties. Worried about older browsers? Since these are webkit properties, older browsers just ignore them, so you don't need to worry much about support.

That means those who can see gradient text, do, and those that cannot, just see the normal text color. Easy!

Adding Gradient Text

To add gradient text, we need to add the following CSS:

.text {       
    background-image: linear-gradient(225deg, #28d8ff, #032eff);
    filter: drop-shadow(0 20px 30px #28d8ff33);
    color: black;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-box-decoration-break: clone;
}

Let's break this down:

• background-image - is the gradient we want to use for our text
• -webkit-text-fill-color - replaces the normal color of the font with a transparent color, so the text disappears!
• -webkit-background-clip - clips the background image to the outline of the text. Now the background will only show where the text is.
• -webkit-box-decoration-break - is the strangest property I've ever seen in CSS, but it ensures the gradient works on multiple lines.
• filter - since we're using background clips and text, we can use a filter for the drop shadow rather than a normal box shadow.

Now it's up to you what gradient you want! Just adjust the background-image colors to show the gradient style you desire. You can find the full code for this demo here.

Happy text gradient-ing!