How to Create a Cool Anaglyphic Text Effect with CSS

Home » Tutorials » How to Create a Cool Anaglyphic Text Effect with CSS

Line25 is reader supported. At no cost to you a commission from sponsors may be earned when a purchase is made via links on the site. Learn more

Anaglyphs are those amazing 3D images that are created by offsetting two of the red, green and blue channels, and are viewed with those nerdy looking 3D glasses with different coloured lenses. I don’t know if this effect works for real, as I’ve unfortunately misplaced my 3D specs, but it’s a pretty cool text effect nevertheless! Let’s take a look at how a similar style can be created for sprucing up your web designs while taking into consideration semantics and avoiding the repetition of any markup.

View the demo

View the demo

What we’re creating is basically a cool transparency overlay effect that closely resembles anaglyph stereoscopic 3D images. To use the effect in our web designs we’ll, of course, build it with CSS, but the main consideration is to keep everything neat and true in our markup, without any repeated markup. Therefore, we don’t want to use anything like this:

Using a span might look OK with CSS styling, but is simply wrong when the word is duplicated

Using a span would be handy to provide us with something to target our CSS to and style up the two words to overlay on top of each other, but when reading aloud in the markup, and when viewed without CSS styling it’s simply wrong. With the effect being more presentational or aesthetic than it is part of the content, we need to ensure it’s semantically correct.

The :after class and content property

:after pseudo class inserts content after the targeted element

Here’s where the content property and the :after pseudo element comes into play. The :after pseudo element allows us to insert a snippet of content after the targeted header and adding our extra text in the CSS content property keeps our markup free of any wordage that shouldn’t be there, ensuring that it can’t be seen or read by screenreaders, RSS readers or search bots.

Targeting the title attribute provides a dynamic solution, but isn't ideal

What’s more, we can also use the content property to not only manually write in some text, but also ask it to take the content from a specific attribute such as the title. This provides a dynamic solution that could be implemented in WordPress, but it’s not 100% ideal as it doesn’t stay true to the natural use of the title attribute. The title attribute should provide more information about the element, rather than regurgitate the same text.

Styling it up

Content without any CSS styling

So far we’ve just got two of the same word placed side by side. Let’s add some extra CSS styling to overlay the two and bring in some colour.

CSS code adds colour and overlaps the words

First up, the H1 element is converted to inline and positioned relatively to allow the absolute positioning of the generated text to work. Next up, the font styling is specified as 200px Helvetica with some letter-spacing tweaks to tighten up the example. The text is then coloured using RGBa, which allows the aplha transparency to be set so that when overlayed the underlying colour will show through. The generated text from the content property is also given some styling, specifically the text is positioned absolutely to sit slightly offset from the original at 10px and 5px on each axis, and is switched to red to contrast against the blue.

The final anaglyphic effect

View the demo

<h1>Hello</h1>
h1 {
	display: inline;
	position: relative;
	font: 200px Helvetica, Sans-Serif;
	letter-spacing: -5px;
	color: rgba(0,0,255,0.5); 
}

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

View the demo

Author
Iggy
Iggy is a designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design trends, inspiration, design freebies, and more. You can follow him on Twitter

71 thoughts on “How to Create a Cool Anaglyphic Text Effect with CSS”

  1. don't mean to sound like the party poop but … don't any of you have business requirement needs to support IE6/7 in your dev work? I'd consider relying on styling such as this to define the look and feel of a site (as opposed to, say, by using images instead) as a UX #fail.

    Reply
  2. this takes it a step further so you dont have to put hello in the title attribute and content

    I didn’t realize you could get the content of an attribute with css!

    h1, h1:after { content: attr(title); }

    Reply
  3. yes after spending ages figuring out how to do anaglaph im telling you it wont work for several reasons. first off the colours arent the most common anaglaph colours used, blue pink and black are more common.

    also there is no reference to the 3d effect. its hard to see if it is popping off the page on plain white. try putting a textured background behind it

    Reply
  4. Hard coding content into css doesn’t seem right to me.. I think text-shadow would be the right way to do this, it would work no matter the content ;)

    Reply
  5. I don’t have any glasses handy, but I think to get a 3d effect you need the horizontal offset to change along the text. If the letter spacing is different for the two colors you might get somewhere. Also get rid of the vertical offset, that makes no sense for stereoscopic vision.

    Reply
  6. Custom web site design solutions for small businesses. Virginia website designers producing custom web sites, shopping cart sites & database driven sites, and everything else web related.

    3D Modeling Virginia

    Reply
  7. Repeating content in CSS is if anything even worse than repeating it in the HTML. Now you have to update both HTML and CSS to change the content, which is less than ideal.

    Here is a better approach, that also does away with the background image used for the gradient: https://users.skumleren.net/cers/examples/line25.html

    Reply
  8. Nice idea, but I’ve got one nit:

    inserting text with CSS :after will not hide it from screen readers, since it will be part of the DOM.

    Reply
  9. What I really like is …
    The 2nd hello is created for presentational use… Separated to the CSS. That’s really awesome!
    I’ve always known about the :after pseudo element but never actually used it!
    I am changing my mind atm :)

    Reply
  10. Great work…but I have a query…
    Is there any CSS property to make font smooth in IE?
    waiting for your reply

    Reply
  11. Great tutorial. Its good practice for web standards to create text effects like this using CSS and real text on websites instead of using images.

    Reply
  12. Great tutorial Chris,
    I think this is the second tutorial for the text effect using CSS. First one was Letterpress effect, Right?

    Reply
  13. Chris – Love your work, but you should let folks know that the :before & :after pseudo elements aren’t supported in all browsers. Same w/ rgba colors.

    With only a little bit of effort, the effect *could* be identical in IE8 at least. ;)

    Reply
  14. Why use the :after pseudo-element at all? This seems like a job for text-shadow

    h1{color:rgba(255,0,0,0.5);font:200px Helvetica, Sans-serif;letter-spacing:-5px;text-shadow:-8px -6px rgba(0,0,255,0.5);}

    Reply
    • You know, that was kinda what I was thinking… But I guess either way will work just as well.

      Very cool idea though and great use of CSS3, thanks Chris!

      Reply
      • I firebugged the h3 heading above the last demo, and got just as good a result without having to enter content into the CSS (as the :after solution would have us do):

        color: rgba(255, 0, 0, 0.5); font-size: 120px; text-shadow: -7px -5px 0pt rgba(0, 0, 255, 0.5);

        Reply
  15. Anaglyphic images should be vertically aligned, i.e., on the same horizontal line, just as human eyes are on the same horizontal line. Otherwise, you will have to tilt your head to see it right.

    Reply
  16. Interesting. Would work “h1:after:after{} as well or is there any alternative if I want more than one “after-text”?

    Reply
  17. This is a great tutorial. I had some clients asking me if something like this is possible on the web. Now I can tell them that it is. Thanks for the great post.

    Reply
  18. It’s things like this that make CSS3 pretty awesome. That’s one less thing to do in Photoshop!

    Thanks for the tutorial Chris.

    Reply
  19. An alternative way to achieve a similar look, still using CSS3, would be to use text-shadow. Something like this would garner the same results:

    h1 {
    color:rgba(255, 0, 0, 0.5);
    letter-spacing:-5px;
    font: normal 200px “Helvetica, sans-serif”;
    text-shadow:-10px -5px 0 rgba(0, 0, 255, 0.5);
    }

    Reply
    • yeah, this does not work as 3D as this is not the technique used to create 3D images, but its a nice effect for plain viewing.

      Reply
  20. Nice. I tried something similar to this recently using multiple text-shadows. The advantage of that is that you can “set it and forget it” for something like a blog, rather than having to make a new :after for each piece of text you want to have the effect.

    I’m dying to get a project where this would be appropriate. :)

    https://hayloftdesign.com/3d-text.html

    Reply
  21. Awesome tutorial Chris. I never thought of doing this. I love how you create these cool text effects with just CSS3. Very creative and it definitely shows some forward thinking of practical uses for CSS3.

    Reply
  22. hey Chris,
    I like the article, great us of rgba. I am not too sure about the h1 display:inline thing though… If we use this in “real life” the headings should remain block level elements :)

    Reply
    • You could put the h1-tag in an additional div with display:block. Not the perfect solution, but you can overcome your problem.

      Besides that: Great article, I simply love CSS3.

      Reply

Leave a Comment

Verified by MonsterInsights