javascript - How to paint half of a letter or text in HTML(CSS)?

If I have :

A

Is there any way in html or css or Javascript which I am able to paint half of "A" white and the other black or any other color.

Thanks

Answer

You can try it with gradients as Robbie suggested. There is only one down side of this. You won't be able to use text-shadow property (except with another hack - make duplicate of text and give it the shadow property)

Edited on request...

p {
  font-size: 12px;
  background: -webkit-linear-gradient(#000, #DDD);
  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;
}

Source code can be found here https://css-tricks.com/snippets/css/gradient-text/