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

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:

It is the amazing 3D text example!
   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):

[ Screenshot: 3D Logo via CSS3 text-shadow ]
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:

use an image.. or use text-shadow..
pixel-perfect rendition/display across browsers browser support required, and display across browsers may vary
advanced styles & effects many cool text-shadow effects possible
larger in size, tend to require more bandwidth less code, even complex styles relatively lightweight
requires an extra HTTP request code only, requires no extra HTTP HTTP request
anchor text is not selectable, but possible to use image-replacement for SEO anchor text is selectable, so keywords available for search engines and visitors (e.g., copy/paste-able)
updating/tweaking requires new a image easy to update or tweak by fiddling with CSS

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:

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