How to Create 3D Text With CSS3

We’ve already seen how the CSS3 text-shadow property can be used to create glowing and blurred text. Today, we’re going to push the property to its limits and enter the realm of 3D:

This is achieved without graphics, plugins, or canvas trickery. Don’t believe me? Take a look at the example page in Firefox, Chrome, Safari or Opera (sorry IE users — you’ll need to wait for version 10).

The depth is created with multiple text-shadows. Each has a zero blur and is increasingly offset from the main text. This graphic shows how the layers are constructed but, in the real example, the colors are similar and the spacing is no more than 1px apart:

A few blurred shadows are then applied to make the 3D effect more realistic. The final CSS:

p.threeD
{
	text-shadow:
		-1px 1px 0 #ddd,
		-2px 2px 0 #c8c8c8,
		-3px 3px 0 #ccc,
		-4px 4px 0 #b8b8b8,
		-4px 4px 0 #bbb,
		0px 1px 1px rgba(0,0,0,.4),
		0px 2px 2px rgba(0,0,0,.3),
		-1px 3px 3px rgba(0,0,0,.2),
		-1px 5px 5px rgba(0,0,0,.1),
		-2px 8px 8px rgba(0,0,0,.1),
		-2px 13px 13px rgba(0,0,0,.1)
		;
}

The demonstration page shows an example and contains the full source code.

OK, so it’s a lovely effect but that’s a lot of CSS code for your weary typing fingers. Building your own styles will also take time and effort. Wouldn’t it be great if we had something to handle the donkey work for us? Stay tuned to SitePoint…