<h1>CSS Character Styling Using Background-Clip</h1>

<div class="testing">
  <p class="test1">To Bottom Gradient</p>
  <p class="test2">To Right Gradient</p>
  <p class="test3 jsWrapEachChar">To Right Gradient Each Char</p>
  <p class="test4">To Bottom Split Half</p>
  <p class="test6 jsWrapEachChar">Split Half Each Char</p>
  <p class="test7">To Bottom Thirds</p>
  <p class="test8">To Right Thirds</p>
  <p class="test9 jsWrapEachChar">To Right Thirds Each Char</p>
<!-- .testing --></div>
.testing {
  overflow:hidden;
}

.testing p {
  float:left;
  clear:both;
  margin:0;
  padding:0;
  font-size:4em;
}

.testing p:not(.jsWrapEachChar),
.testing .jsWrapEachChar > span {
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
}

.test1 {
  background-image:linear-gradient(
    to bottom,
    #FF0000 0%,
    #0000FF 100%
  );
}

.test2,
.test3 > span {
  background-image:linear-gradient(
    to right,
    #FF0000 0%,
    #0000FF 100%
  );
}

.test4 {
  background-image:linear-gradient(
    to bottom,
    #FF0000 0%,
    #FF0000 50%,
    #0000FF 50%,
    #0000FF 100%
  );
}

.test5,
.test6 > span {
  background-image:linear-gradient(
    to right,
    #FF0000 0%,
    #FF0000 50%,
    #0000FF 50%,
    #0000FF 100%
  );
}

.test7 {
  background-image:linear-gradient(
    to bottom,
    #FF0000 0%,
    #FF0000 33%,
    #000000 33.33%,
    #000000 66.67%,
    #0000FF 66.67%,
    #0000FF 100%
  );
}

.test8,
.test9 > span {
  background-image:linear-gradient(
    to right,
    #FF0000 0%,
    #FF0000 33%,
    #000000 33.33%,
    #000000 66.67%,
    #0000FF 66.67%,
    #0000FF 100%
  );
}
(function(d) {
  
  for (var wrapper of d.getElementsByClassName("jsWrapEachChar")) {
    var text = wrapper.textContent;
    wrapper.textContent = "";
    for (var char of text) {
      var span = wrapper.appendChild(d.createElement('span'));
      span.textContent = char;
    }
    
  }
  
})(document);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.