37 Brilliant Examples of Transparency in Web Design

Transparency in web design has been held back by IE6′s inability to display transparency in PNG files. Now that there are workarounds using javascript and the increasing lack of support for the aging browser transparency has become a viable option in web design.

All of the examples below make use of transparent PNGs.

Envato

envato

Fix Outlook

fixOutlook

Line25

line25

Sam Brown

samBrown

Inspiration in a Box

inspirationInABox

Postbox

postbox

Holdfire

holdfire

eleven3

eleven3

West City Hotel

westcityhotel

Evodence

evodence

Moradito

moradito

Brad Colbow

bradcolbow

Housing Works

housingworks

Lilly’s Table

illystable

Mateus Neves

mateusneves

Whitespace

whitespace

Freestyle BMX

freestylebmx

Christine Galvin Design

cgalvin

Aurelien Reaut

aurelien-reaut

Respiro Media

respiromedia

Silverback

silverback

Aislinn

aislinn

Design Attik

designattik

Avalonstar

avalonstar

Matt Zeilinger

mattzeilinger

Beak

beak

Bara’ Design

bara

Marmalade on Toast

marmalade

Russ Kirby

russKirby

Vitra Direct

vitradirect

HelloThemes

hellothemes

Piz’za-za

pizzaza

CSS Leak

cssleak

Carbonmade

carbonmade

Mint

mint

Perishable Press

perishablepress

Core

corebasis

Author Tom Kenny

I'm the creater of Inspect Element and currently work as a web designer for TUI Travel. You can view my portfolio and follow me on Twitter.

Discussion

  1. Very nice selection ..

    Check out this site ..

    http://www.newyorkpalace.com/

    Very nice effect with the transparant navigation.

  2. Tom Kenny says:

    The problem with that site Steen, is that it is almost entirely built using Flash and I see know reason why it should be. Seems unnecessary to me.

  3. Agree 100% don’t like Flash sites – but some of the transparancy effects are quite nice.

    From a technical and SEO standpoint Flash sites is far from ideal.

  4. Beautiful..spotlight on these sites!

  5. JohnONolan says:

    Nice list, but HUGE oversight missing out youlove.us from this collection! :)

  6. Eric Roberts says:

    The Holdfire website mentioned here uses a theme purchased online available here: http://themeforest.net/item/griminati-business-website-layout/32173

    No disrespect meant towards Holdfire or the author of this blog post, but it’s always nice to have credit go where it’s due. Thanks for sharing these fantastic designs.

  7. Tom Kenny says:

    Thanks for pointing that out Eric, I was unaware of that.

  8. Graham Dell says:

    I’ve used similar effects on my website: http://burningcliff.com.

    Excellent round up.

  9. Really nice list! :) It’s great to see transparency effects on the rise (when used well). I’ve enjoyed using it in some of my recent projects as well. :)

  10. I’m pleased that we can finally move on from being held back because of IE’s inability to use PNG files (without JS)

    However, in an ideal world. IE6 wouldn’t be used at all :)

    Thanks for the sharing these sites.

  11. william says:

    The list is not complete without this one: http://www.artishockdesign.nl/

  12. Danny says:

    Here’s another, hand drawn style with *lots* of overlaying alpha pngs

    http://www.limpfish.com

  13. Kevin says:

    I’ll shamelessly add this one to the list:
    http://factory-interactive.com

  14. Nice list. I like this post. Inspired gallery…

  15. Dave Sparks says:

    Hi Tom
    Thanks for the collection. It’s certainly an effective technique for a good look in web design and will be great to see when more browsers allow us to implement CSS based solutions.
    In the meantime here’s a nice link for those wishing to use PNGs and not have to worry about the dreaded IE6
    http://24ways.org/2007/supersleight-transparent-png-in-ie6

  16. Syd Lawrence says:

    Hi Tom, thanks very much for featuring our site http://www.marmaladeontoast.co.uk
    Anyone calling it ‘brilliant’ is very much appreciated!!!

  17. Max says:

    thanks for featuring our westcity hotel website :-)

  18. i like these kind of designs

  19. Mulan says:

    http://nob.fi/ uses a simple, subtle transparency effect to keep their gorgeously large background photos from completely disappearing in the sub pages. I like it. :)

  20. virtuo says:

    Hi guys,
    check out the dynamism and transparency effects used here:

    http://ceramicca.pl

    I love the background illumination!

Become Part of the Discussion

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.