How to apply CSS to only half Word or character?

I want to apply CSS to half word of character only, means I would like to create a character effect in which we have One-half of character as Blue color while another half as black or transparent white.

How to achieve it using pure CSS or javascript/CSS combination?

Asked by:- Vinnu
: 543 At:- 7/20/2017 8:07:17 AM
CSS javascript HTML half-character-styling

1 Answers
profileImage Answered by:- jaya

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

  • 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



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;
  background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;





here is the Fiddle example

At:- 7/20/2017 12:09:11 PM
thank you, it helped me a lot 0
By : Vinnu - at :- 8/17/2017 5:07:07 PM

Login/Register to answer
Register directly by posting answer/details

Full Name *

Email *

By posting your answer you agree on privacy policy & terms of use