How to apply CSS to only half Word or character?

Yes there are ways with the help of which you can style half character or word using CSS

HalfStyle.com

• Pure CSS for a Single Character
• JavaScript used for automation across text or multiple characters
• Preserves Text Accessibility for screen readers for the blind or visually impaired
• You can use Pure CSS way or javascript way using this technique.

Example : jsFiddle

Splitchar

Another plugin, Splitchar can be used to styling of word or charcter using CSS

Direct Method

You can use this pure CSS solution, which will work in webkit and Chrome

h1 {
  display: inline-block;
  margin: 0; /* for demo snippet */
  line-height: 1em; /* for demo snippet */ 
  font-weight: bold;
    font-size: 400px;
  font-family:Arial;
  background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

HTML:

<h1>Z</h1>

Output:

here is the Fiddle example