CSS Anaglyph Text Effect

An anaglyph text effect is simple and can add a fun element to your site.

To begin, we will put whatever text we want to display as an anaglyph in an h1 element in the HTML.

In the CSS, style your h1 element as shown.

Pick any font-family you like, I just thought Orbitron from Google Fonts looked cool for this effect. Adjust your letter-spacing until you like it. The color here is cyan.

The exciting bit comes in when we use the after selector to add the red, and resulting overlap.

Adjust the left and top properties until you are satisfied with the amount of overlap.

Using the mix-blend-mode allows us to tell our elements how to interact in that overlap. Choosing multiply causes the overlapping colors to be multiplied together, resulting in the third dark color.

I would love to see what you make! Have fun!