I’ve created a CSS multi tonal background using three layers of graduated colour - just to see if this effect has potential in website design.

It makes use of the .png media type so you’ll only be able to see the complete effect in browsers that support .png, for example Firefox and the latest versions of Opera.

You won’t see the complete effect in IE 6 or below, but with IE 7 well on its way now, which I believe will support .png, there’ll soon be little reason not to make use of .png files.

This technique layers three background images over the top of each other; a vertical graduation, a horizontal graduation, and a ‘light spot’.

I’ve designed it to degrade nicely so that current versions of IE will at least show the vertical graduation - the graduated horizontal overlay and the light spot in the bottom right hand corner will not display.

I hope you’ll agree this technique has potential. Feel free to trawl the code and adapt/improve the technique if you can (I think CSS3 proposes multiple background images in a single element!). Throw me a link back too because I’d love to see this implemented into a site.