Create a Letterpress Effect with CSS Text-Shadow

Create a Letterpress Effect with CSS Text-Shadow

The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here!

Letterpress – Isn’t that a type of industrial print method? That’s right! But the effect has also made its way into web design. Check out the previous feature showcasing examples of how designers are using this cool ‘de-bossed’ look on designs across the web.

With the recent support of text-transform in Safari and Firefox (3.1+) the effect can easily be created without needing to use any image replacement techniques. This means your text is much easier to edit, and has the benefit of being rendered directly in the browser.

View demo

Create a simple background

Start out by creating a simple background. In Photoshop create a 100×100px and fill with a dark grey. Add some texture using the Noise filter.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pure CSS Letterpress Effect</title>

<h1>Line25</h1>
<h2>Pure CSS Letterpress Effect</h2>


</head></html>

Set up a plain HTML document, then add a few lines of text to test the effect on.


body {
	background: #474747 url(bg.png);
}

h2 {
	font: 70px Tahoma, Helvetica, Arial, Sans-Serif;
	text-align: center;
}

Style up the text using the usual CSS properties to edit the size and basic appearance.

Text-Shadow CSS3 Property

Now we’re ready to apply the text-shadow property. This works by specifying an x-offset, a y-offset, the shadow blurriness and the actual colour of the shadow.


color: #222;
text-shadow: 0px 2px 3px #555;

To create the letterpress effect, we need to add a shadow that’s lighter than the colour of the text to ensure the effect works correctly. Here we’re using #555555 against the darker #222222 text colour. A 2px vertical offset and very subtle blurriness helps give the exact appearance we’re after.

View the CSS letterpress effect demo

Simple! Check out the example to see it for yourself. Don’t forget, users with rubbish unsupporting browsers will only see the plain text, without the cool shadow awesomeness, so use it wisely.

View demo