How to create a multi-colored text on a web page?

Hi Shraddha,

To write multi colored text, you should use below code.

In the above code, actually it is wrapping each letter in it’s own element.

Otherwise, there is another way, you should write a below CSS code.

. multicolored {
background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
color:transparent;
-webkit-background-clip: text;
background-clip: text;
}

Then call above CSS “multicolored” Class into your Html code. Below is the Html example.

Mobile app development and Web development company India

2 Replies

Know the answer? Post it — somebody with the same question will find it here.