Skip to main content

How to Create 3D Text With CSS3

By Craig Buckler



Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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:

3D text effect

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:

3D text effect

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

		-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…

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

New books out now!

Get practical advice to start your career in programming!

Master complex transitions, transformations and animations in CSS!

Latest Remote Jobs