Line25

How to Create a Cool Anaglyphic Text Effect with CSS

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

August 22, 2017

Line25 is reader supported. At no cost to you an affiliate commission may be earned when a purchase is made through various links on our 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 demoPinPin

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 duplicatedPin

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 elementPin

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 idealPin

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 stylingPin

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 wordsPin

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 demoPinPin

<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

Written by 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 Comments

Would you like to say something?

  1. Dimitar Christoff says:

    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.

  2. Johnny says:

    This is great, I like how you added all the CSS tips in as well, instead of taking the easy root out, to keep people right :)

  3. adrusi says:

    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); }

  4. Eliot says:

    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

  5. Tonći says:

    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 ;)

  6. Poncho says:

    Man, I’m sorry but that sucks!!!!
    there is no 3d effect at all…

  7. myquealer says:

    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.

  8. Trulium says:

    Great info on 3D effects.It is an important feature for designing websites.

  9. Virginia Web Design Company says:

    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

  10. Matt says:

    Might have been a good idea to test with 3D glasses BEFORE you wrote a blog post about it!

  11. Christian Sonne says:

    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

  12. Chad says:

    I am trying with a pair of red/blue 3d glasses from an old box of cereal and I don’t notice any 3d effect :(

  13. web design kent says:

    Great read, some good points mentioned there

  14. Lars Gunther says:

    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.

  15. Aravind says:

    Smart job…….It’s nice….Thank…..

  16. rahul says:

    But it do not work on IE6.

  17. wien says:

    thank you, it’s a great tutorial

  18. John Faulds says:

    Very clever idea Chris, but extra bonus points for those who thought of using text-shadow instead.

  19. Robin Saha says:

    I like this topic and now i m looking for investment blog and i create very good one …..https://www.investresource.info

  20. Ly Antie says:

    Thank you, it works. I use to combine color: rgba(153,204,255,0.5); and color: rgba(255,153,204,0.5); for my blog ;)

  21. Cem Meric says:

    Nice technique Chris, thanks.

  22. Ahmad Alfy says:

    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 :)

  23. brad sherrill says:

    effective use of the content property

  24. Long Island Web Design Company says:

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

  25. TheWebTuts says:

    Tutorial added to thewebtuts.com

  26. Sheena says:

    Hello,
    Very nice. but not good in IE. in IE its does not show any colour. only show black colour

  27. jay design says:

    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.

  28. Salvador Lopez M. says:

    Nice tut buddy

  29. Duncan says:

    This is the stuff of CSS Ninja’s!

  30. Nikhil says:

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

  31. Travis Neilson says:

    Very interesting tip, I had not even thought about using content: in this way. Thanks Chris.

  32. Matt Lewsley says:

    Wow this is a great tutorial! Thanks for sharing :)

  33. Eric says:

    Great tut. It works!

  34. stk says:

    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. ;)

  35. pol says:

    thank you for sharing. I like these simple tuts as the Letterpress one, more into good code than design.

  36. Katie says:

    That is really cool, at first it sent my eyes funny but after reading your tutorial I want to try it.

  37. Benny says:

    Wow, that really does look cool. I’ll have to use this is some of my designs at some time. Thank you, Chris.

  38. Kartik says:

    This is awesome…will surely use it..

  39. Soh Tanaka says:

    This is tight :-) Great technique

  40. Orb says:

    Just like Brad and Steffan said, text-shadow is much better. Simple CSS and easier to make template with CMS system.

  41. Aftab Khalid says:

    CooOooOool Post i will use it my new personal project thanks Chris :)

  42. Markus Danek says:

    *rawr*

    Just love this cool Text Effect – thanks! :-)

  43. Kenneth B says:

    Great effect. So simple and efficient.

  44. Brad Czerniak says:

    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);}

    • Laura says:

      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!

      • Gary says:

        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);

    • Montoya says:

      Now _that’s_ using your head :)

  45. Maicon says:

    Great effect. So simple and efficient.

  46. Aaron says:

    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.

  47. ivomynttinen says:

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

  48. Christopher Da Sie says:

    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.

  49. Paul Anthony Webb says:

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

    Thanks for the tutorial Chris.

  50. Steffan Williams says:

    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);
    }

  51. Alan S says:

    So, just for grins… does anyone have 3D glasses laying around that they could test this out on and report back?

    • Chapolito says:

      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.

  52. Matt Barnes says:

    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

  53. Antoine Guédès says:

    That’s brilliant!
    I never tought of doing this like that. Thank your for this tutorial.

  54. uma mahesh varma says:

    nice post ….

  55. Imran Subhani says:

    Good technique Chris. Nice tutorial.

  56. noushad vadakkel says:

    NICE…..

  57. Clarice says:

    Pretty neat! I will be using this in future projects! Thanks :)

  58. Joe says:

    yea, I am wondering how to make that “properly dynamic” when embedding it in some kind of web app…

  59. Romi says:

    great tutorial i will use that technique in my future project thanks Chris :-) Cheers

  60. Design Informer says:

    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.

  61. Alen says:

    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 :)

    • DesignLovr says:

      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.

Please Share