Transparent PNG Generator

A while back, I blogged about CSS transparency techniques, describing two methods for incorporating transparent elements into your design. You can also introduce transparency by using PNG format images. Unlike GIF images, which are either "on" or "off" in terms of opacity, PNG images support full alpha transparency. This means each pixel can display a subtle range of tones from 0 to 255.

There are many ways to create transparent PNG images. If all you need is a plain transparent block to use as a background, check out Stian Grytøyr's handy transparent PNG generator. This useful tool allows you to select a colour by clicking on a color wheel. The tool creates a set of samples ranging from 0% to 100% transparency, in three versions of the selected colour (web-safe, "web-smart," and unsafe).

Lighten or darken the sample by clicking on the saturation/lightness patch to the right of the colour wheel. When you have the desired shade, click through on one of the percentage samples to see it used with some demo text against a busy background. From here, you can adjust the image dimensions, transparency, and colour. Right-click on the final rendered sample to save the image to your hard drive.

Note: The PNG graphical format enjoys strong support among compliant browsers such as Firefox, Opera, Safari and IE version 7. If, however, you view Grytøyr's page in IE 6 or lower, you will not see the transparency effect, as earlier versions of IE do not support full alpha transparency. For details, and a workaround, see A List Apart's article, Cross-Browser Variable Opacity with PNG: A Real Solution.