Trend Review: Coffee Stains in Web Design


Hi, hope you had a great week end! I know it’s been a while since I posted something, so here it goes…

In one of my previous trend reviews, I had mentioned about the cofeecup trend. What if you drop the cofee on your table or paper? yes, it becomes another trend ;)

Do you think adding some coffee stains to your design would make it look better? Here goes a list of hand-picked designs that proves it! I’ve included links to tutorials on how to create such stains in photoshop as well.

Stains in websites


Coffeenatic coffee stains


ispoilnet cofee stain

teh C peng

tehcpengnet stained background

The Greg Brady Project

Greg Brady - stain on paper

The Piss Biscuit


Mike Desjardins

Mike Desjardins

What would you need to create these cool hot stains?

Its simple…

Photoshop brushes

coffee photoshop brushes

morning coffee

Now, how to create these brushes?

Its not that hard. Here goes a nice tutorial by web design library But make sure not to spill your entire coffee after reading this :)

Coffee stain social networking iconset

Social Networking Coffee Stain Icons


A coffee stainfree wallpaper


for to keep you inspired.

And finally, a twitter theme

twitter background theme

I hope you enjoyed this post. Stay tuned!

About Gopal Raju

Gopal Raju is a passionate designer, developer and blogger from India. He’s the founder of Convax Solutions, a web design and development agency in India. Catch up with him on dribbble, Twitter and Facebook.

17 Responses to Trend Review: Coffee Stains in Web Design

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  1. i’ll start spilling my coffee.

    phoenix self storage

  2. Nice blog, interesting article, I shall try out myself. Thanks for sharing.

  3. Hey , Amazing website. Never seen something like this, the drag & drop effect.
    Care to send me the code please.

  4. Just what I looked for! Thanks for the tutorials… going to make one and I’ll send a stain design when it done.

  5. Hi, nice designs. You are really creative.

  6. Now that is a challenge! I will try this out and let everyone know the outcome

  7. Coffee designs are used very effectively and I must commend the people who have worked on this.Good job there

  8. The Ubuntu wallpaper is a coffee stain?

  9. Hi, I seem to have the last comment on your previous article about coffee and stumbled into this one again too!

    Bookmarked your site to look into again sometime when it’s not silly-o-clock in the morning!

    Nice work! :)

  10. Your design tips are good. I will try some of those and let you know hot it come out.

    Webdesign Stuttgart

  11. Gopal, It is nice to see lot of designing tips on your website. I really enjoyed reading how to create coffee stains in web designs.

  12. Ya i have stains on many website templates. Dirty looks good! dugg!

  13. Lovely coffee stain collection! Makes me wanna have another cup. =). Thanks for including designfreebies twitter theme. Twitted!

  14. Great and interesting list.. nice idea to post about :D

  15. ranish chirayil July 14, 2009 8:56 am

    Nice pick…

  16. Nice roundup :) I’m starting to like these stains.. lol dugg and stumbled your post.