Book Sale! Save 20% on WordPress books with discount code: SAVE20
Web Dev + WordPress + Security

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

Jeff Starr
About the Author
Jeff Starr = Web Developer. Book Author. Secretly Important.
WP Themes In Depth: Deep dive into WP theme development.

3 responses to “3D Text with CSS3 text-shadow”

  1. awesome effect,thank for share

  2. Bharat Chowdary 2012/06/12 12:47 pm

    Real fun and thanks for the tutorial.

  3. Stephanie 2012/06/16 6:37 am

    I found not only this article to be well written, but I stayed on your site for quite some time today. You have such awesome tutorials and a fresh approach at delivering all this information. Keep up the good work!

Comments are closed for this post. Something to add? Let me know.
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
WP Themes In Depth: Deep dive into WP theme development.
Currently having a blast redesigning Plugin Planet, so much work so little time.
Thanks to David McCan over at WebTNG for the awesome BBQ Pro review.
Enjoyed a nice mini-vacation with my fam. Great way to recharge and regroup.
Nice little interview with yours truly over at ThemeIsle. WordPress, web dev & more!
Perishable Press celebrating 16 years online! An incredible, rewarding journey.
Thanks to Nicholas Ferrell for his excellent and thorough review of Wutsearch search-engine launchpad.
Great article about using RSS as a Facebook alternative. I use RSS/feeds for news every day. Facebook, not so much.
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.