Add grunge effect to text using simple CSS

August 9, 2008

When I first saw CSS text gradient effect I asked myself how this trick can be used to create some more effects. Actually, there are an infinite number of effects you can create – the limit is your imagination. In this short tutorial you will see how to add grunge effect to your text using just CSS and one image.

Step 1: Create a transparent PNG image

You can use Gimp or Photoshop and some of the free brushes:

Experiment with the brushes and color, but keep in mind that the color you use must match the color of your background. The image we are going to use in this example looks like this:

grunge2

So, we are going to make a grunge effect on a black background.

Step 2: Create simple CSS

Now we are going to add grunge effect on H1 element. In order to make this work we need a little trick: place an empty span tag inside each H1 element. Be sure to add it after the text like in the example below.

<h1>This is one very long title with grunge effect<span></span></h1>

Now the CSS magic. We are going to use absolute positioning inside relative positioning (I mentioned this in my article How to create web application user interface that looks like Outlook several weeks ago). So, we are going to place absolutely positioned span element inside the relatively positioned H1 element. That way a grunge image that is actually a background image of span element will make an overlay on H1 element.

h1 {
    position:relative;
    color:#aeef33;
    font-family: Georgia;
}

h1 span{
    position:absolute;
    display:block;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:url('grunge.png');
}

And viola! This is the result:

grunge effect

See it live

Step 3: Experiment

Try to find some interesting brushes or patterns which you can use to create a different effects. For more information about CSS text effects, read the following articles:

Let's discuss this on twitter.

38 Comments

  • Khushal Patel (August 9, 2008)

    WoW!!! I don’t :-O believe that , it is so easy to do that :D
    Thanks Janko, great fan of yours keep up the good work it really helps the people;-)

  • lee (August 9, 2008)

    Nice Janko, but have to say for once I already knew this one (And in fact posted a very similar example last year)

    http://www.blogfodder.co.uk/post/2007/06/SEO-Friendly-H1–H2-Image-Headings.aspx

    ;-)

  • Ruchit Surati (August 9, 2008)

    Janko,

    That’s a really cool tip. I liked your blog so much that you’re in my Daily-Must-Visit-Blog-List though I’m already subscribed to your RSS feeds. Keep it up. I also let my visitor’s know about your blog..

    Check it out at http://www.ruchitsurati.net

    Thanks.

    Ruchit S.
    http://ruchitsurati.net

    ********************************************

  • Janko (August 9, 2008)

    Lee, very nice and simple article :) However I prefer the approach I described here because instead of creating an image for each title, you can use one image and create an overlay.

    Ruchit, thank you!!

  • David Walsh (August 9, 2008)

    Janko, this article is great! I love simple CSS tricks like this that pack a punch. Keep up the great work!

  • Janko (August 9, 2008)

    David, thanks a lot!!

  • liam (August 9, 2008)

    I’ve always thought about doing this, never got round to it. But think I might give this a try, nice one!

  • Brad Blogging.com – Personal Blog Tips And Blog Help (August 9, 2008)

    Great Stuff! It is so simple, yet so original.

    Will be coming back for more. :D

  • Examples (August 10, 2008)

    CSS "Cascading Style Sheets" Lessons
    css list style Properties and examples — http://css-lessons.ucoz.com/list-css-examples.htm

  • Kartikay (August 11, 2008)

    Great job Janko, this article is great…

  • RyanOC (August 11, 2008)

    Killer article again, thanks! You’re my favorite blog and in my "must check every day list" as well, keep rocking the articles!

    Ryan

  • Eazzy | Web Design (August 11, 2008)

    Great work Janko, I love CSS tricks and this really good tips!

  • Some.Net(Guy) (August 11, 2008)

    Cool trick, for sure. The only problem I see is that you have to add empty bloat code to your XHTML to achieve it. If one isn’t worried too much about semantics, this trick is definitely worthwhile.

    PS, you forgot to mention that the PNG has to be the same color as the background… otherwise it will show up around the letters as well! Try highlighting the text w/your cursor to see what I mean.

  • Janko (August 11, 2008)

    @Some.Net: there is an explanation for the backgorund color, just above the PNG tiled image ;-)

  • Travis (August 12, 2008)

    a very handy PNG trick indeed!

    unfortunately this will trigger a warning in W3C validation, for you have empty span tag :-O

    A 2 sec hack would be putting a &nbsp; within the tag :D

  • Janko (August 12, 2008)

    Travis, you are right, I like your quick hack :)

  • Some.Net(Guy) (August 12, 2008)

    Ah, you got me. I must learn to read more carefully :) But Travis is indeed right. What you could also do is put something in your span tags that would make it semantic, such as text saying "Effect applied: Grunge" and then set your text-indent to -5000px in your span tag (as well as giving your span tag a class, ie "effect-grunge"). That way you could even keep track of your different effects and change them more readily should you so desire!

  • Janko (August 12, 2008)

    @Some.Net: Thanks for very good tips! I just have to think more in that direction.

  • Lineker (August 12, 2008)

    nice guys….thks for the tip

  • NaldzGraphics (August 14, 2008)

    Janko,

    thanks for sharing it:)im gonna try it on my blog:D

  • Email Designer (August 14, 2008)

    Very cool tip. Thanks again guys

  • Some.Net(Guy) (August 14, 2008)

    Oh, one other thing, Janko – PNG transparency renders horribly in IE6… you must make your readers aware of this so they know that any use of PNGs alienates all IE6 users. Personally, I use PNGs because if you are still using IE6, I probably don’t like you anyways :)

  • Janko (August 15, 2008)

    @Some.net: Right, but IE6 users just have to move on ;)

  • Dever (August 18, 2008)

    Are you aware that this technique can be considered text hiding by search engines (especially if you’re "hiding" h1). I’m not saying it will … but it can. (A)
    Congrats on the blog ;-)

  • Janko (August 18, 2008)

    Dever, I am not sure this is text hiding, h1 is visible in its full beauty ;-)

  • Dever (August 18, 2008)

    Well, you can do smth like this than:
    <h1><span>text goes here</span></h1>

  • Some.Net(Guy) (August 18, 2008)

    Dever –

    I’m pretty positive that this technique would not be considered text hiding by any search engine. I know that Google’s sophisticated, but this would be damn near impossible to detect.

  • Qbrushes (August 23, 2008)

    That’s just one way to achieve it, great post non the less.

  • Mortgage Broker (January 19, 2009)

    This is certainly quite helpful although I’m just getting to grips with CSS and how much can be done with it.

  • Mark (February 18, 2009)

    This idea really rocks!

    We are using this right in the menu of EVERY PAGE at <a href="http://www.flipscript.com">FlipScript ambigram products</a> to grunge up the text to match the rest of the site. When we have time, we might do the same with every single header!

    It adds a ton of visual appeal!

    Honestly, the hardest part was just getting the grunge graphic JUST right (not too much, not too little).

    Thanks for sharing.

  • Christian (April 13, 2009)

    A viola is a musical instrument. The word you meant to use at the end of your entry is ‘voila.’

  • Christian (April 20, 2009)

    I’ve added the grunge effect on my dev blog to the H2s and H3s. Here’s an example:

    http://developer.cmzmedia.com/?p=242

    Also, I used jQuery to add the SPAN element in.

  • Christian (April 21, 2009)

    Got you a mention here:

    http://developer.cmzmedia.com/?p=316

  • Janko (April 21, 2009)

    Christian: Looks great, thanks for the mention (and for pointing out typo!) :)

  • Christian (April 21, 2009)

    Thank you for creating the grunge effect.

  • Website design india (May 22, 2009)

    hey a very handy PNG trick indeed!

    unfortunately this will trigger a warning in W3C validation, for you have empty span tag… thanks again

  • Christian (July 2, 2009)

    Does anyone know of a good wood-textured PNG graphic to use with this effect? I downloaded a wood texture PhotoShop brush but it won’t let me save it with any transparency.

  • Blogging Guide (September 17, 2009)

    Thanks for this your a life saver, been trying to do this for days now!