Text-Shadow and Too Much Time
CSS3 gives us many great new toys, and recently I spent some time exploring one of my favorites: the text-shadow property. Before we get in to the examples, here are some fun facts about this property:
- text-shadow does not require any prefix (such as -moz- or -webkit-)
- it allows multiple values, so you can add multiple shadows to text
- as right of now, text-shadow is not supported in the IE9 beta, but is supported by every other browser
- its been around in WebKit since 2006, but was just added to Firefox with version 3.5
The syntax is fairly simple:
text-shadow: x-offset, y-offset, blur amount, color;
…and just add values – separated by commas – for multiple shadows. I found that using ems for the offsets and blur helped with fine-tuning the effect.

In Action
With text-shadow, we can achieve some not-ground-shaking-but-as-yet-unheard-of effects with web typography. To see what I mean, check out this bevy of demos I concocted.
Letterpress
To achieve a letterpress effect, first create a text-shadow without blur that is offset below your text and is the same color as (or slightly lighter than) your background:
text-shadow: 0 2px 0 #fef8f0,
Then add a blurred, darkened shadow with no horizontal or vertical offset:
text-shadow: 0 2px 0 #fef8f0, 0 1px 3px #bbb;
Note that you only need to add a comma between shadow values. You may want to lessen the effect on smaller text. In my example, the P elements have less of a blur on the darkened shadow.
Outline
Outlines are simple in context, but kind of a pain to execute. Basically, you want to surround your text with five sharp shadows of the same color:
text-shadow: 0 1px 0 #fff,
1px 1px 0 #fff,
-1px 0 0 #fff,
-1px -1px 0 #fff,
1px -1px 0 #fff;
I noticed some issues with the outline being cut off in WebKit browsers; this can be fixed by adjusting the line-height. WebKit supports a text-stroke property as well, but this text-shadow method is preferable since it works in more browsers (except, of course, IE).
Emboss & Engrave
Using the same concept as the outlines, you can also create an embossed or engraved dimension to your text. Instead of all for sides being the same color, though, just contrast opposite sides with an opposite value:
text-shadow: 0 1px 0 #888,
1px 1px 0 #888,
-1px 0 0 #fff,
-1px -1px 0 #fff,
1px -1px 0 #fff;
/* Text embossed */
text-shadow: 0 1px 0 #fff,
1px 1px 0 #fff,
-1px 0 0 #888,
-1px -1px 0 #888,
1px -1px 0 #888;
/* Text engraved */
You can fine tune from here to enhance or exacerbate the illusion.
Echoes
This is one of my favorite styles. It reminds me of baseball jersey text. You can create this style by first offsetting a sharp shadow that is the same color as the background by two pixels:
text-shadow: 2px 2px 0 #fff,
…then add another sharp shadow of a different color, offset by three pixels:
text-shadow: 2px 2px 0 #fff, 3px 3px 0 #888;
These distances are, of course, relative and should be adjusted as needed.
Extrusion
I actually got this one from Mr. Trent Walton, who does it much better. My only twist is to vary the colors to make a slight gradient:
text-shadow: 1px 1px 1px #ccc,
-1px -1px 0 #bbb,
-2px -2px 0 #bbb,
-3px -3px 0 #b7b7b7,
-4px -4px 0 #b3b3b3,
-5px -5px 0 #b0b0b0,
-6px -6px 0 #acacac;
Ad Infinitum, Sine Nauseum (Hopefully)
There are a few other examples and experiments on my demo page, which I encourage you dissect to derive your own. The real trick with any style is to know when to use it, and to what degree. My advice: always err on the side of subtlety. Please.
Other posts in "design"
- Scoping a Project
- The Most Important Element of a Professional Designer
- The Analog Notepads of Unit Interactive
- Makin’ Days
- Too Wet
- UnitElves
- Designing vs. Making Stuff Up
- Usability vs. Thinkability
- Big Brand 1080px Design
- Design Reimagination
- Redesigning Unit Interactive
- Define Design
- Delicious Design
- Wired Infographics
- Ugly Websites = User Flight?
- Design in the Sociopolitical Arena
- Infographics in IdN
- Radio Frequencies
- The Consummate Web Designer
- Hey Unitards! Design Mantra?
- Hey Unitards! Are Graphic Mock Ups Even Applicable?
- The Future of Web Browsing
- Beyond Comp Review: Two designs enter. One leaves.
- Hey Unitards! What about TV?
- Hey Unitards! Creative Brief?
- Better CSS Font Stacks
- No Compromise Required
- Do You Know Who You are as a Designer?
- Creating Great Online Experiences
Comments (6)
The “Engraved” effect is my favorite although the “Letterpress” version is probably the most readable for web-copy at smaller point sizes. Thank you for putting all of these together.
Thanks for sharing this :) There’s something a bit Geocities about those emboss and engrave effects, like they ought to be combined with blinking and scrolling text, and a jerky animated GIF of a rotating dog… Seriously, though, it’s great that CSS3 is giving us the opportunity to be a bit more creative with text; although like most decorative text effects (and ornate fonts) they seem to work better with headers than copy text.
@Joel: I completely agree that the examples are a bit over the top. Mainly, they are “enlarged to show detail,” if you will. And yes, they all work better at larger sizes since you can then dial back the effect without losing clarity.
Echoes…? Ha, that’s a new one. Liked how you’ve shown how to use multiple shadows to give a bit more detail on emboss and engrave (instead of using the a single 1px top or bottom shadow).
Have you seen Desandro’s site with extrusion?
@Ted: Don’t think so. Feel free to post a link.
Helpful tutorial.Thanks a lot.
Your Comment