How to Create an Anaglyphic Text Effect with CSS

Anaglyph is the 3D effect, that contains two differently filtered colored images, one for each eye and is fully visible through 3D glasses. However, even without glasses, these effect looks cool and creative, and you can use it for making your Website more attractive.

Let’s try to create one together.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

First of all we need to put our text in an HTML <h1> tag.

<h1>Welcome</h1>

Add CSS

Start styling the <h1> element by setting the display to its default “inline” value and the position to "relative'.
Specify the font, letter-spacing, and color properties on your <h1> element.
Add the CSS ::after pseudo-element and put the content property, that is used with ::after pseudo-element to generate the content inside it.
Set the position to "absolute", specify the left and top properties and add color. We give red 50% opacity, in order to make the underlying color show trough.

h1 {
  display: inline;
  position: relative;
  font: 150px Optima, serif;
  letter-spacing: -5px;
  color: rgba(150, 0, 255, 0.5);
}

h1:after {
  content: "Welcome";
  position: absolute;
  left: 10px;
  top: 5px;
  color: rgba(255, 0, 100, 0.5);
}

Let’s bring all the parts together and try some examples.

Example of creating an anaglyphic text effect using a "rgba" color:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        display: inline;
        position: relative;
        font: 150px Optima, serif;
        letter-spacing: -5px;
        color: rgba(150, 0, 255, 0.5);
      }
      h1:after {
        content: "Welcome";
        position: absolute;
        left: 10px;
        top: 5px;
        color: rgba(255, 0, 100, 0.5);
      }
    </style>
  </head>
  <body>
    <h1>Welcome</h1>
  </body>
</html>

Try it Yourself »

Result

Welcome

If you don’t need this effect especially for using it with 3D glasses, you can change its colors and use only the style.

Example of creating an anaglyphic text effect:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        display: inline;
        position: relative;
        font: 150px Garamond, serif;
        letter-spacing: -5px;
        color: #FFFFF0;
      }
      h1:after {
        content: "Welcome";
        position: absolute;
        left: 10px;
        top: 5px;
        color: #FF69B4;
      }
    </style>
  </head>
  <body>
    <h1>Welcome</h1>
  </body>
</html>