Showcase of Transparency in Web Design

Transparency is being used in an increasing number of websites. In some cases transparency subtly adds to the quality and character of the design, and in other cases it can be a major design element. In this post we’ll feature 35 websites that are making excellent use of transparency.

2am

2am

Electricurrent

Electricurrent

Sam Brown

Sam Brown

Housing Works

Housing Works

Lift

Lift

Lilly’s Table

Lilly's Table

Sisu

Sisu

Russ Kirby

Russ Kirby

Imaginaria Creative

Imaginaria Creative

Mint

Mint

Ordered List

Ordered List

Delicious CSS

Delicious CSS

BenSky

BenSky

World in My Lens

World in My Lens

Galan

Galan

WebMynd

WebMynd

Blik

Blik

FontShop

FontShop

Go Media

Go Media

Squarespace Blog

Squarespace Blog

SOASdesign

SOASdesign

Oliver Kavanagh

Oliver Kavanagh

Gavin Castleton

Gavin Castleton

SolidShops

SolidShops

Blogs.mu

Blogs.mu

Pulse

Pulse

Neutron Creations

Neutron Creations

Two24 Studios

Two24 Studios

24 Ways

24 Ways

Lynn Cyr

Lynn Cyr

Second Story

Second Story

Nick Hand

Nick Hand

WWF

WWF

Pop Labs

Pop Labs

The Photo Argus

The Photo Argus

For more design inspiration please see:

Published February 22nd, 2010 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

46 Responses

Comments are now closed on this post.

  • Dany, February 22, 2010

    Great source of inspiration thanks!

    Even if it’s only a blog, I’ll add this one: http://dyvantity.com

    regards

  • Josh Hemsley, February 22, 2010

    *cough* http://joshhemsley.com *cough* :)

    hehe. Great collection though! Thanks for the inspiration!

  • Nick Hand, February 23, 2010

    Wow! What a cool list, and I’m so stoked to be included with these awesome sites… thanks!

    Nick Hand

  • Catherine Azzarello, February 23, 2010

    @ Josh lol!

    I’ve been using transparency for decades! (Loved transparent inks in serigraphy waaaay back in college!)

    And now that I can manage transparencies w/CSS3…yippee!
    *cough* http://eyestylesllc.com *cough* :-)

    Too bad IE still requires .png backgrounds or alternate hex numbers!

  • Federica Sibella, February 23, 2010

    This is a serious source of inspiration, thanks!

  • 2am Web Design Preston, February 23, 2010

    Thank you for featuring 2am Media in this listing.

  • Webmaster-X, February 23, 2010

    Good stuff, man. I especially like how it’s ben implemented on 24 Ways. Fascinating!

  • CodeMyConcept, February 23, 2010

    It is not hard to pull of and gives the website a very nice and clean look. Hope people don’t over use it.

  • me2you, February 23, 2010

    @JoshHemsley

    big props on your site! I dig it like dug.

  • Web Design Puerto Rico, February 23, 2010

    Very nice, the transarency i think its going to be a trend of 2010

  • Taxing Lessons, February 23, 2010

    I’ve been admiring these web design posts for some time, and would like to know if you have, or would consider, posting a tutorial on how you get your screenshots so clear and crisp.

    I am a d-i-y-er and don’t have access to the professional tools you do (am currently using Picasa and PhotoPlus6), but I’d sure like to be able to post prettier screenshots.

  • Nina, February 23, 2010

    Great finds, thanks for posting :)

  • pixeline, February 23, 2010

    Is that it? 35 printscreens/links? No comment, no reflexion, no attempt to draw some guidelines out of it?

    Here is one : choose carefully the image that goes in the background: contrast is the key (see the first printscreen: the background image is desaturized). Basically, you have two options:
    1/ you pick whichever gets the information load: the background or the foreground, not both
    2/ you make it so that both fore and background blend into each other (the Mint example).

  • Luis Fernando, February 23, 2010

    Why not include this?

    http://catalystainteractive.com/

    :P

  • Vandelay Website Design, February 23, 2010

    Taxing Lessons,
    I don’t have any special tricks. I simply use the screen print key and paste it into Photoshop. Sometimes I use the Screen Grab extension for Firefox.

  • Joanna @BOCOCreative, February 24, 2010

    I love how transparency adds depth. I’ve also incorporated it into my portfolio website – love the outcome. There are a couple of outstanding examples here as well. Great finds.

  • Rene zammit, February 24, 2010

    I never used transparency, but after reading this article, I think I am gonna star using it :) Thanks

  • WebExpress, February 24, 2010

    Thanks a lot for this Article :)

  • aledesign.it, February 24, 2010

    Great article…I see more examples for my job! Useful! Interesting! Fabulous!! Thanks for the sharing!!

  • kinkyminx, February 25, 2010

    thanks heaps! some really good & useful examples

  • Manya, February 25, 2010

    thank you very much for the feature and the wonderful showcase!

  • Uğur Eskici, March 1, 2010

    All of excellent works. but sometimes browsers show diffent when we use transpareny with some css rules :/

  • Patrick, March 1, 2010

    Nice portfolio, guys. We love transparency in website design!

  • website_designer_0G13, March 2, 2010

    Great inspiration and showcase of use.

  • Cre8ive Commando, March 4, 2010

    Nice examples of transparency. Don’t forget the transparent PNG fix for IE6! :-)

  • George McKnight, March 4, 2010

    Loving it, loving it! Specially like the Nick Hand one with a nice bit of tasteful grunge, and a great wee navigation to boot.
    My site makes good use of semi-transparent png’s and a javascript moving background, no flash here mates http://www.soultank.com/

    Keep up the good work guys, God bless ya.

  • Galeel, March 4, 2010

    Another example; http://rubyconfindia.org/index.html

  • Parvez, March 4, 2010

    Here is our site http://www.kaynatsoft.com it used power of transparency!

  • Northern Ireland Hotels, March 4, 2010

    Some fantastic uses of transparency! WWF site is exceptional!

    Bookmarked and shared…

    Lee.

  • Babs, March 8, 2010

    Great list! Here’s one that I did a few years back: http://www.trainingtrips.eu.

  • Amy, March 9, 2010

    Great stuff got a lot of inspiration from this!

  • deArte Gallery, March 10, 2010

    Great, really inspiring and informative blog. Thanks!

  • Apa1exakis, March 12, 2010

    A cool one I found, http://www.mediplantfunding.com. Uses transparency.

  • Eduardo Rezende, August 5, 2010

    Add this one too!

    http://expressite.com.br/

    :)

  • Eduardo Rezende, August 5, 2010

    This one too!

    http://silverbackapp.com/

    :)

  • Robin Cox, August 22, 2010

    Transparency is really great to spice up a webbdesign, just use a png, its easy. The only problem is ie6 that wont play but there are some clever javascripts to fix that annoying browser.

  • Aleksandr, March 8, 2011

    Good selection, the site itself is also quite good.

  • web design preston, August 1, 2011

    Great stuff got a lot of inspiration from this! We’ve actually just created one http://www.ruffordarms.com let us know what you think