The technique I am demonstrating here isn’t one I made from scratch; as far as I am aware, credit for origination should go to Mark Otto, a designer at Twitter; the version that I’m showing derives from patterns created by Trent Walton. This is not “true 3D” but a fake-out; real 3D text will have to wait for lessons in WebGL and CSS 3D transforms.

Very simply, we create extruded text appearance by creating a stacked series of CSS text-shadows. As we’ll see later, transferring the same technique to box-shadow can also create the effect of a raised or sunken button in CSS.

The CSS code is somewhat repetitive; the main aspect to focus on is the changing vertical offset of the main shadows. Thankfully, text-shadow does not require CSS vendor prefixes.

The code for the example at the top of this article is:

h1 {
	background: #ccc;
	font-size: 4vm;
	padding: 1.2rem;
	color: #fff;
	font-family: Blue Highway; Arial Black, sans-serif;
	text-align: center;
	letter-spacing: 1rem;
	text-shadow:0 .01em 0px #dededa,
		0 .015em 0 #dededa,
		0 .02em  0 #dededa,
		0 .028em 0 #dededa,
		0 .035em 0 #dededa,
		0 .04em  0 #dededa,
		0 .045em 0 #dbdbd6,
		0 .055em 0 #dbdbd6,
		0 .06em  0 #dbdbd6,
		0 .065em 0 #d9d9d4,
		0 .07em  0 #d9d9d4,
		0 .08em  0 #d8d8d3,
		0 .085em 0 #d8d8d3,
		0 .09em  0 #d8d8d3,
		0 .095em 0 #d6d6d1,
		0 .105em 0 #d6d6d1,
		0 .06em .06rem rgba(104, 104, 92, 0.15),
		.07em .105em .04em rgba(0, 0, 0, .015),
		-.02em .09em .05em rgba(104, 104, 92, 0.25),
		-.03em .07em .065em rgba(104, 104, 92, 0.1),
		-.075em .08em .09em rgba(104, 104, 92, 0.06),
		-.09em .06em .195em rgba(104, 104, 92, 0.095);
}

Just as with multiple background images in CSS, we separate multiple text shadows with commas, starting with those originating nearest the text element and working outwards. (For this example I’m using em units rather than px for enhanced scalability, but almost any CSS unit of measurement would work).

The first 16 shadows are solid, slowly and subtly growing darker as they descend, creating the appearance of extruded text. The final six shadows in the declaration actually serve the purpose of ambient shadows, being offset to the left, right, and top of each letter, with added blur and transparency (in the form of rgba color values).

Naturally, this effect will only work in modern browsers – IE9 does not support text-shadow, although IE10 does. It’s therefore wise to make sure that make that the base color of the text is distinct from the background, as is the example at the top of this article; try to avoid “white on white”, ensuring that your content is still readable in IE.

For those wondering, the Baluchitherium (aka Paraceratherium) is the largest land mammal ever discovered; a gigantic, hornless rhino with a giraffe-like neck, extinct for 23 million years.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/waqwBg