Line25

Create a Letterpress Effect with CSS Text-Shadow

Read the full post

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 100x100px 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

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

  • http://www.mavenox.nl Janportfolio

    cool, tnx!!

  • http://www.dzinepress.com Dzinepress

    really nice!

  • http://cahcepu.com om ipit

    great tips chris
    simple but useful

  • http://www.zeemidesign.com zeemiDesign

    I can’t wait for all browsers to implement CSS 3. It will make so many things so much easier for us.

    I personally refuse already IE 6-Support for my portfolio web site, the users get redirected to a page with alternatives to IE 6.

  • http://deconstructioncode.blogspot.com/ choen

    how about ‘@font-face CSS embedding’

  • http://www.littleboxofideas.com/blog/ Sneh | LBOI Blog

    Great tut! Dugg, Tweeted and Bumped!

  • http://www.legadesigngroup.com leandra

    This is a great visual effect and I can already think of a spot where a client would love it. Thanks for the post!

  • http://www.position-absolute.com Cedric Dugas

    Love it!

  • Ben

    awesome! nice work mate

  • http://www.webdesign-bureau-of-mauritius.com Web Design Bureau of Mauritius

    Hmmm, I’m using the latest version of Firefox. Is it one of the rubbish unsupported browsers? It seems that I can’t really view the example page, at least I can’t see the effect.

  • http://www.chidimar.com Enk.

    Wow, Cool.
    It works well on Firefox but its showing simple text in Flock and Internet Explorer

  • http://twitter.com/web2000 web2000

    Hey nice easy effect here. I just wanted to share what it could look like in Internet Explorer (and firefox) using 2 absolute position spans – http://dealfreezer.com/demo34_pure_css_letterpress_ie.html – thanks!

  • http://www.bebop-ad.com BebopDesigner

    Wow, it’s brilliant! Reaaly really handy. Thanks for sharing. Cheers.

  • http://www.bickov.com Alexander Bickov

    Reallu amazing post

  • http://www.moinid.com Most Interesting Ideas

    I understand so that does’t work on IE

  • http://www.webgrafismo.com Pedro Magalhães

    Strange… I’m not seeing it on Mozilla 3.0.13
    But i get the idea

  • http://sandman6665.com sandman6665

    Another cool css3 feature! Wish most browser vendors support css3..

  • http://craveytrain.com Mike Cravey

    Something I played with is using an rgba color so that you don’t have to customize the text-shadow for every style you want to use it on. Also helps if you have varying background colors.

  • http://www.dai-media.com DAI Media

    Wooow, verry beatifull feature of css.
    Thx for sharing.

    Regards from Spain

  • D

    No idea why we’re calling this the letterpress effect. Good letterpress doesn’t smash the hell out of the paper. What’s wrong with calling it what we’ve always called it: Debossed.

  • http://tutsking.com TutsKing

    I clicked b/c I’m awesome. ;) It was worth it. :)
    I think a few people have called it Letterpress and it pretty much spread without anyone blinking an eye. . .

  • http://www.studiomuku.com Barrett

    I mean this is a great effect, is it really that hard for people to upgrade their browsers? I mean come on! Thanks!

  • studdude

    splendid effect, but It’s no soon all users will be able to experience this one, unfortunately…

  • http://www.creare.co.uk Michael Thomas

    That is a lovely effect. I was wondering what the reason for creating the grey background was, I can see many other uses for this. Cheers!

  • http://www.module23.com Module23 Werbeagentur Koblenz

    Hey Chris,

    thanks for that innovative article. Bookmarked for letterpress effects!

  • http://evelt.com joel k

    wow
    web designer depot linked me to this page
    thanks 4 sharing this amazing effect

  • http://WebDesignExpert.Me Dmitry

    Cool effect! Very nice!

  • http://www.jediclanitalia.com Marco

    Many thanks, I used it on my e107 site on the titles and even on the navbar.

  • http://www.onlinebrand.dk Daniel Due

    Very nice, gonna try it out right away ;)
    BTW.!! I belive that all of us are gonna love when IE6 is left outta here.. :D I to, leave ppl with a message, telling them to upgrade from IE6.

    Anyways, keep em comming :)

  • http://www.onlinebrand.dk Daniel Due

    Hmm, cant seem to make this work, whats the browser support? you mention Firefox, but ive tested it in this? even firebugged your demo.. but tried on a white bg?

  • http://www.aheadcreative.co.uk David Smith

    Nice work. I would suggest that the following code produces a bit of a cleaner efffect:

    text-shadow:1px 1px 1px #555555;

  • http://dashboardoverdrive.blogspot.com le

    cool effect!

  • Sahan

    Hi,
    The press effect successfully shown in IE & FF, but not in chrome. (Chrome shows a text with a drop shadow) However recently I updated the FF and now it’s also showing a text with drop shadow ?

  • TeresaLiu

    Thanks for the tut, it’s help, i see it on google chrome, perfect performance.

  • manjeet

    cool effect but not work on IE6

  • http://astore.amazon.com/legostarwars-buycheapstarwarstoysforsale-20?_encoding=UTF8&node=3 legOstaRwArs

    cool effect!
    but does’t work on IE

  • http://www.wpexplorer.com WpExplorer

    Amazing. Thanks.

  • http://www.webdesignexpert.me WebDesignExpert.Me

    Great post! Linked to from my web design blog on how to use css text shadow to create letterpress effect.

  • http://www.varitek.co.uk/ Jason

    awesome, look forward to using that.

  • http://kkoepke.de Kai

    damn nice effect. thanks for your post.
    a shame it doesnt work in IE

  • http://designinformer.com Design Informer

    Very nice Chris. Will be using this in my next web project.

  • Yousuf

    Neat stuff!!!

  • http://creativeinnovator.com bharat

    VERY NICE NEAT STUFF ;) KEEP ROCKING

  • http://david.latapie.name/ David Latapie

    Hi,

    I would like to achieve the same effect but with a ghostwhite (#F8F8FF) background. Could you help me with the code, I tried hours with no luck?

    Thank you.

  • http://www.mimrankhan.com Imran Khan

    I this a nice tutorial but this isn’t working in IE 6 ,

    actually i would say ie 6 sucks..

  • alex

    Is a good tutorial, this work in IE8,

    visit my web http://www.onlycatsanddogs.com

  • sanakan

    a, a * {
    color: #1456a5;
    text-decoration: none;
    }
    a:hover, a:hover * {
    color: #39f;
    text-shadow: 0 0 3px #1456a5;

    Another cool shadow at http://raphaeljs.com/
    just a few number changed.

  • Dhirendra

    Good Post.

    But it doesn’t work on IE 6.

  • http://www.brandledesign.com Graphic, Web, Blog Design | BrandleDesign

    Nice trick!

  • http://babydoll.nu jaycee

    thank you so much♥ check my blog :)

  • http://www.saumyaray.wordpress.com saumya

    nice trick,just incorporated in one of my projects.Sudden improvement in UI :)
    thank you so much

  • http://www.bendesign.eu Bender

    Nice Trick. Thank you for sharing. Very useful.

  • http://www.gordejev.lv Aleksejs Gordejevs

    Nice info! Thanks!

  • http://schmacklab.com Mark Luetke

    Great I was looking for this!

  • http://www.roid-shop.com mickel

    This is very nice and the letterpress effect is good. buy steroids online
    buy steroids online
    buy steroids online

  • http://www.liminal-design.co.uk/ Liminal Web Design Cornwall

    I was looking at this on a site the other day wondering how they achieved it, awesome as it works with the CMS.

    Amazing how these little touches make such a huge difference.

  • http://www.wizmediateam.com hercival

    nice trick..
    but this letter press does not work with internet explorer…

  • http://www.xtubes.net XTubes

    Change the rgba to .33 in the .blackbox and make the background color the same on both it looks exactly the same.

    Free porn tubes

  • http://www.hasfa.myportal.my hasfa

    nice tutorial and trick. Thanks Guys.

  • http://www.asvega.net as

    not work internet explorer

  • http://www.fredricktoo/wordpress Gary

    just a note: the effect illustrated is known as relief or emboss printing. Letterpress (which I worked with for a few years in the 70′s is indistinguishable from any other printing unless magnified at least 5X. All magazines prior to the lithography boom around the early 70′s were printed letterpress. Get a magazine like Life or Time from the 60′s or before and compare the type under magnification to anything from the mid 70′s onward.

  • http://www.bonstutoriais.com.br Victor Tiago

    Thank you very very much!!!!

    nice tutorial!!!!

  • http://smashdesign.blogspot.com SmashDesign

    Useful toturial

    Thanks for this post

  • Marius M.

    Thats a nice.
    Can I use the background of the example on my own page for free or under a creativecommons licenses?
    Greetings
    Marius

  • http://www.glendelmdesign.co.uk/ Web Design Cambridgeshire

    Thanks for another great tutorial. Shame it isn’t supporting properly yet though…

  • Will

    Really fine post.

    Thanks for sharing.

    Get more here.

    Design

  • aimee

    In the example you are placing the h1 and h2 tags in the head and do not have a body.

  • http://www.sgdoeschwitz.de BigM75

    thats the right way, more please, nice article

  • http://medicalspamd.com Medspa MD

    Great tutorial. Nothing extraneous which is nice to see amidst a blizzard of content.

  • http://sendside.net Sendsider

    You can add this to the CSS but if it’s overdone, or added to smallish type it tends to lose it’s effect. Headlines are best use.

  • http://wptidbits.com/ wptidbits

    Oh my god. I never knew of this can happen only using simple CSS codes! Maybe now is the time to focus more on CSS codes rather than using plain images and combined it with CSS. Page load might reduce a lot!

  • BInE

    It’s nice, but didn’t work in IE.

  • Badger

    Thanks Chris, nice and simple and easy to follow. I know i’ll be using this in my designs from now on.

    Give us more like this.

    Thanks again.

  • http://thefreecreatives.com Crystal

    I was looking for something just like this the other day. Thanks so much for the detailed explanation/tutorial. I’ve been seeing this technique around and definitely see it as a growing trend!

  • http://ferizaenal.com ferizaenal

    thanks ^_^