<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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.