How To Create A Letterpress Effect Using CSS Text Shadow

Letterpress: The letterpress effect is very useful and popular in web design. Now, these days couple of modern browsers are showing support for text-shadow CSS3 property in web design.This effect is very simple and easy to create text-shadow with pure CSS.

Started with letterpress effect…
We will use a dark-colored background for contrast. On light colored backgrounds, letterpress effect doesn’t work because we use a white color to creates the effect. 

If you want a better effect, so paper texture background also uses for it.The background text must be light as compare to text and should have proper contrast.

HTML for effect...
Firstly we will create a class, the class name is letterpress. After this, we will create a paragraph and apply the effect to it.

<div class="letterpress">
   <p>Beautify Your Blog on a Budget!</p>
</div>

CSS for creating the effect...

Now we will set a background with a dark color and apply some font style on our text like font-family, font color, font size and set the alignment of text.

div.letterpress {
   background: #474747;
}

div.letterpress p {
   font-family: 'Nixie One', serif;
   color: #888;
   font-size: 2em;
   text-align: center;
}

For creating the letterpress effect we add one more line of CSS. We’ll add a shadow with color that’s lighter as compared to the text color. White color usually for shadow, but it's not mandatory to use white color, we can use any color according to the background.

CSS for apply text-shadow...
We use this format to defining our text-shadow

text-shadow: x-offset(1px) y-offset(1px) rgba(color, alpha transparency)

For shadow blend a little into the background using use alpha transparency.

div.letterpress p {
   font-family: 'Nixie One', serif;
   color: #888;
   font-size: 2em;
   text-align: center;
   text-shadow: 1px 1px rgba(255,255,255,0.8);
}

255, 255, 255 define the RGB value for white and 0.8 define 80% opacity. For 50% opacity we define 0.5 value. And if you want no transparency, so you’d give the value a 1.  Here RGBA stand for red, green, blue and alpha (opacity). 

Note:
The Background color should be lighter as compared to font color and shadow also lighter as compared to font color.