How to Create an Anaglyphic Text Effect with CSS

An anaglyph is a 3D effect that contains two differently filtered colored images, one for each eye, and is fully visible through 3D glasses. However, even without glasses, this effect looks cool and creative, and you can use it to make your website more attractive.

Let’s try to create one together.

Create HTML

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

How to use 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 set the content property to generate the duplicated text inside it. Note: The content value must exactly match the text inside the <h1> element to keep the layers aligned.
Set the <span class="property">position</span> to "absolute", specify the left and top properties and add <span class="property">color</span>. We give red 50% opacity, in order to make the underlying color show through.

How to style an HTML <h1> tag using ::after pseudo element with content, position and color properties?

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:

An example of How to Create a text with 3D effects using CSS properties?

<!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

<div class="demo px-2.5 mt-1 mb-5"> <span>Welcome</span> </div>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:

An example of How to Create an Anaglyphic Text Effect with CSS

<!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>

Try it Yourself »