3D Text with CSS3 text-shadow

Here’s a fun way to make text look 3D using CSS3. Using CSS whenever possible instead of images has several key advantages, including faster page-loads and better SEO I use the CSS text-shadow technique in a previous theme, and a few people had asked about it, so here it is: everything you need to create your own stunning 3D-text with CSS3..

Here’s a quick table of contents:

• Basic 3D text-shadows with CSS3
• Example of 3D logo with hover effect
• Using CSS vs. images
• Browser support
• More text-shadow examples

Basic 3D text-shadows with CSS3

To make text look 3D with CSS3, we take advantage of text-shadow’s ability to handle multiple values. So you sort of “build up” your 3D styles with something basic such as:

text-shadow: 0 1px 1px #bbb,
		0 2px 0 #999, 
		0 3px 0 #888, 
		0 4px 0 #777, 
		0 5px 0 #666, 
		0 6px 0 #555, 
		0 7px 0 #444, 
		0 8px 0 #333, 
		0 9px 7px #302314;

These text-shadow values use the same syntax:

text-shadow: h-shadow v-shadow blur color;

So the first property value creates a 1px layer of shadow directly beneath (and closest to) the text example. Subsequent values create additional 1px layers that gradually change color, from light to dark. To further the effect, we put 1 pixel’s worth of “blur” on the innermost shadow layer, and then top it off with a nice, seven-pixel blur to sort of “blend” it all together.

A great way to get the hang of 3D text-shadows is to just copy & paste from the example and tweak the colors, blurs, and offsets. Hint when going for the 3-dimensional look: “tweak vertically” down each column of values to keep things “lined up”.

Example of 3D logo with hover effect

For a more elaborate example of 3D text-shadow, here is my site logo as styled in the horrible previous Unicorner theme:

Here’s a screenshot for those without JavaScript (custom-fonts):

3D logo used in the Unicorner theme

Here is the CSS code used to create that fancy 3D logo:

#example-theme a:link, #example-theme a:visited {
	color: #000; font: 48px/1 'Erica One';
	text-shadow: 0 1px 1px #bbb,
			   0 2px 0 #999, 
			   0 3px 0 #888, 
			   0 4px 0 #777, 
			   0 5px 0 #666, 
			   0 6px 0 #555, 
			   0 7px 0 #444, 
			   0 8px 0 #333, 
			   0 9px 7px #302314;
}
#example-theme a:hover, #example-theme a:active {
	text-shadow: 0 1px 1px #ddd,
			   0 2px 0 #c5bba4, 
			   0 3px 0 #c5bba5, 
			   0 4px 0 #b7ae98, 
			   0 5px 0 #a39a87, 
			   0 6px 0 #8b8472, 
			   0 7px 0 #726c5c, 
			   0 8px 0 #5b5547, 
			   0 9px 7px #474136;
}

If you look at the source-code, you’ll notice a few other rules in play; these are used for display purposes (to “undo” styles from alternate themes. These may be safely ignored — you should only need the code provided above, where the first block of CSS sets the :link and :visited styles, and the second one defines :hover and :active, respectively. As with the basic example, further modification and customization is encouraged :)

Using CSS vs. images

Here are some key factors in deciding when to use an image for 3D effects versus styling actual text with CSS text-shadow:

In general, images are great when you can’t do it with CSS, or when cross-browser consistency is critical. Other situations may also apply — designer discretion is advised.

Browser Support

The good news is that CSS3 text-shadow is supported by just about every major browser; and of course the bad news is that Internet Explorer isn’t one of them. The not-so-bad news, however, is that you can get text-shadow support in IE with a variety of techniques.

More examples..

To continue with more copy/paste examples of CSS3 text-shadow, this quick reference guide should get you going:

• Examples of CSS3 text-shadow property
• CSS3 text-shadow snippets

I’m know there are other good resources out there, so let me know of any favorites and I’ll add them to the list.

Thanks for reading! :)

About the Author

Jeff Starr = Web Developer. Book Author. Secretly Important.