CSS3 is brilliant.  It does a lot of the things we used to have to do by embedding graphics in the browser and, consequently, reduces the amount of HTTP data.  However, as the standards aren’t yet in place, things are still a little hit-and-miss.  One of the most useful one is background gradients.  I’ve got this working in IE7+, Firefox, Chrome, Safari and Opera and I’ll run through them in order.

One thing to bear in mind though – use all 6 hex digits.  It’s long been established with hex colours that you can use either 3 or 6 numbers.  If you use 6 numbers (eg, #012345) it displays that number and that if you use 3 numbers (eg #012) it doubles them up (to give #001122 in our example).  Predictably, the offending browser is Internet Explorer.

In all the examples here, I’ll be starting with the colour #444444 (dark grey) and ending with #000000 (black).  This is meant as an overview for browsers – for more detail, look up something like http://css-tricks.com/examples/CSS3Gradient

Firefox

Nice and simple as you’d expect

background: -moz-linear-gradient(top,  #444444,  #000000);

Chrome/Safari

Again, pretty simple

background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#000000));

Opera

It took me ages to find this one, but this appears to work in all versions I’ve tried

background-image: -o-linear-gradient(#444444, #000000);

Internet Explorer

Astonishingly, this appears to work in IE7, 8 and 9.  The problem is that you must use all 6 hex digits.  If you use 3 (eg, #444) what I’ve found is that it doesn’t seem to work correctly.  Confusingly, it doesn’t display the colour #000444, but actually displays #0000fd.  Using #444444 solves the problem though.

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');

The IE bug highlights the drawbacks of relying on CSS3 whilst the standards aren’t finalised yet.  However, this is the only bug I’ve found in 6 months of using purely CSS3 on my latest project (BugFinders.com)