How can I split a text in 2 color vertically?

Question

I want a word in my div to be split in 2 colors vertically using pure CSS, any idea how I can do that?

Answer 1

You can certainly use CSS3 gradient and clip properties .. I am aware of webkits which I used for, but not sure about other browsers, if you want you can try this

Demo (Please 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: As a web developer am not using any latest browsers, if you know any proprietary property which works the same please feel free to edit my answer