Multi colored text in CSS

📣 Sponsor

Multi colored gradient text is becoming increasingly popular all over the web. In the past, mutli colored text required static images, but now it can easily be done with CSS rather than photoshop. The great thing about doing this in CSS is it keeps the text as text - so it can still be indexed by search engines.

Creating multi colored text in CSS

To make colorful text with just CSS we'll create a few different text gradients. Here are a few examples below:

Web3 Gradient

Crypto Text

Some Text

A New Startup

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!

Last Updated 1617115568892