Recently, I wanted to create some Red/Blue 3D text. After a great deal of searching on the internet, I discovered that very few people have actually done this, and those that have seemed to rely on creating a duplicate of the content. Creating a duplicate copy of the text wouldn’t work for me, since my text used a great deal of formatting.

Through hours of trial and error, I found something that seems to work pretty well. Here are the caveats:

1. It does not work in Internet Explorer
2. It requires CSS3
3. It uses alpha colors, which means it’s a bit more CPU-intensive than text normally is.

Otherwise, it seems like a good solution. This works in Firefox for Linux and Mac and Chrome for Linux and Mac. It does not work in IE at all, and it doesn’t work in Safari (last time I checked).

Here it is:

How It Works

Let’s start with some basic text in a div:

<style>
.threed {
  font-size: 250%;
  text-align: center;
  border: 1px solid black;
  margin: 1em;
  border: 1em;
}
</style>

<div class="threed">
Hello world!
</div>

First, you can apply a text-shadow using a CSS3 property called text-shadow like so:

.threed {
  font-size: 250%;
  text-align: center;
  border: 1px solid black;
  margin: 1em;
  border: 1em;
  text-shadow: .5em 0 .2px rgba(0%, 100%, 100%, 0.6)
}

Here we put a text-shadow on our text that is offset .5em horizontally and 0em vertically. It has a ‘blur’ of .2px, which means virtually none at all. The text color is a cyan, at .6 alpha transparency.

The text-shadow element actually allows us to specify multiple text-shadows, so we can just add a second shadow now, this one pink, still .6 alpha transparency, but offset .5em to the LEFT instead of the right (using a negative offset)

.threed {
  font-size: 250%;
  text-align: center;
  border: 1px solid black;
  margin: 1em;
  border: 1em;
  text-shadow: .5em 0 .2px rgba(0%, 100%, 100%, 0.6), -.5em 0 .2px rgba(100%, 0%, 0%, 0.6);
}

The last thing we’ve got to figure out how to do is hide the black text itself. This is actually easy, since you can apply alpha transparency to any color using CSS3. In this case, we’re simply going to make the text fully transparent.

/* 3D CSS Effect: www.nomachetejuggling.com */
.threed {
  font-size: 250%;
  text-align: center;
  border: 1px solid black;
  margin: 1em;
  border: 1em;
  text-shadow: .5em 0 .2px rgba(0%, 100%, 100%, 0.6), -.5em 0 .2px rgba(100%, 0%, 0%, 0.6);
  color: rgba(40%, 40%, 40%, 0.0);
}

This effect tends to work best for:

• Small font sizes
• Lots of text
• Normal weight (bold text looks bad)

You can see this technique used in a lengthy parody of the movie Clash of the Titans here.

Degradation

This seems to degrade really well in Internet Explorer, which supports neither alpha transparency on text nor text-shadow. As a result, it shows up as just plain black text.

It degrades very poorly in Safari however, which supports alpha transparency on text but not text-shadows, meaning that the text is rendered invisible without the shadow, so it just shows up as a big blank box.

Improvements

I fiddled with a lot of different parameters to try to perfect this, and what you see here is as close as I was able to get. The trick with 3D text is that you want the overlapping areas between the pink and cyan to be dark enough to show up for both eyes, the result of multiplying the cyan and pink colors together. With the CSS, it’s a bit lighter than I’d like, but it seems to do the job.

I also tried to do it in a way that simply made the main color pink, with a single cyan shadow (and vice versa) but I found that, without that slight blur parameter (.2px), the colors didn’t seem to blend quite as well, hurting the effect.

If anyone out there figures out a way to improve this, please post a comment here with your tips.