Clever Geek Handbook

How can you split text by 2 colors vertically?

I want the word in my div to split into 2 colors vertically using pure CSS, any idea how can I do this?

+3


source to share


1 answer


You can of course use CSS3 Gradient and Clip Properties. I am aware of the web kits I have used but not sure about other browsers, if you want you can try this

Demo (view it on chrome)



div {
  font: 40px Arial;
  background: -webkit-linear-gradient(top, #0d2172 0%,#0d2172 50%,#ff2828 50%,#ff0000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Note. Since the web developer is not using any recent browsers, if you know any property property that works the same, feel free to edit my answer

+2


source






More articles:


All Articles