html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> Creative PNG Transparency Web Design Examples

Creative PNG Transparency Web Design Examples

Clever PNG use

Png transparency can be used to add creative effect to web-design. Though there are some accessibility issues with certain browsers (IE Mainly) which can be overcome with use of javascript fix.

Here we have collected 8 creative examples of web-design using png transparency one way or another. If you know any other website please let us know in comments.


Speaklight uses layers of png images to give a glassy look with vibrant colors in background. It uses 3 layers of divs first body background second wrapper or container background and using another background colors and images over that.

Blue Flavour

Bluflavor uses fixed background with content overlay over it. Everthing is designed with detail.


The green surrounding images is fixed at bottom of page with content behind it which is kept scrollable. A very nice effect.

Trevor Saint

Extensive use of of Png transparency can be seen here from navidation menu to content background to logo all png.


A transparent gradient image is used for content background here. Which adds to uniqueness of the website.


Png transparency used for news section bubbles on right side.


Silverbackapp creates parallax using 3 layers of images which gives it effect of 3d. Thinkvitamin explained in detail how to create this effect. Css-Tricks also created a tutorial for it see Starry Night Tutorial

One another Tutorial is there for using png images to create fade out bottom effect using fixed position image.