Up until CSS3‘s come along, creating graduated backgrounds in web pages has been a fiddly experience. Older versions of CSS only supported single colours as backgrounds so we had to create our gradients in Photoshop or Fireworks or the like and then bring them in as background images.

And, seeing as background images don’t scale in < CSS3, gadients could never be guaranteed to fit the element they were sitting in.

CSS3 is still being finalised but the background gradient property is already supported by All Modern Browsers* – but they’ve all implemented it their own unique way! Hooray!

Save yourself enormous grief by using CSS3 gradient generators here and here.

For more info on how to make them work in IE have a look at the CSS PIE site.

*so, not in Internet Explorer 8 and below