CSS Snippets: Split Color Text Effect

Over here at CSS Newbie, we love using CSS to create unique text effects for our projects. Today, we’re going to use CSS to create a split-color text effect, where an angled line is drawn through a block of text, and the text is one color above the line, and another color below the line. It’s a really neat effect and a great way to add both color and dimension to your projects. To see how it works, check out the snippets below.

First we’ll need some pretty straightforward HTML to define your text, which can say anything you like. Your HTML should look something like this:

<div class="content">
    <h1 data-letters="pizza is life">pizza is life</h1>
</div>

All you need is a div and an h1 tag. Make sure you include an attribute (can be called whatever you like, as long as you remember to call it as a variable later on in your CSS) whose value matches your text, in this case: pizza is life.

Now it’s time for the css:

::-moz-selection {
 background: #5b63fe;
}
::selection {
 background: #5b63fe;
}
h1 {
 width: 100%;
 height: 100%;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 text-align: center;
 position: absolute;
 margin: 0;
 font-family: 'Helvetica', sans-serif;
 color: #ff4d7f;
 font-size: 50px;
 letter-spacing: -0.225rem;
 background: white;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 z-index: 1;
 -webkit-transition: font-size 250ms cubic-bezier(0.59, 0.04, 0.3, 1.43);
 transition: font-size 250ms cubic-bezier(0.59, 0.04, 0.3, 1.43);
}
@media screen and (min-width: 768px) {
 h1 {
 font-size: 80px;
 }
}
@media screen and (min-width: 1024px) {
 h1 {
 font-size: 100px;
 }
}
h1:after {
 content: attr(data-letters);
 position: absolute;
 left: 0;
 z-index: 2;
 overflow: hidden;
 white-space: wrap;
 width: 100%;
 height: 100%;
 top: 0;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 text-align: center;
 position: absolute;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 color: #e3f7f0;
 background: #5b63fe;
 -webkit-clip-path: polygon(0 0, 100% 0, 100% 25%, 0 77%);
 clip-path: polygon(0 0, 100% 0, 100% 25%, 0 77%);
}

So now, your code should look like this:

Pretty cool, right? You’ll notice that the text above the blue line is a light minty green, while the text below the line is a bright fuchsia. We achieve this effect mostly using pseudo-selectors (:after) and the useful clip-path property. Try it out for yourself in your own projects — feel free to customize the colors, text, and font family.