I've been struggling to come up with a good cross-browser(ish) solution for gradients that doesn't require external images or extra markup, and indeed SVG + CSS

I've been struggling to come up with a good cross-browser(ish) solution for gradients that doesn't require external images or extra markup, and indeed SVG + CSS3 + IE's filter is the best I've found. It means IE9 (via SVG) renders the page exactly like Chrome, which is great. For IE8 (which has a larger market share than IE9 in our userbase) I had to use IE's filter property in a separate conditional rule so as to not mess with IE9 (for which it breaks border-radius). Unfortunately, I'd rather not request 10+ svg images, so I chose to embed them in css. That means around 512 bytes per gradient, so around 1K for a button with a mouseover effect. But it's something I can live with (and compress). If you're willing to load external images for linear gradients and don't want the hassle of creating each image by hand, you could build a lightweight server side script to generate the SVG based on url paramters. There's several IE behaviours out there, of which I found CSS3Pie to be the most complete. It implements border-radius, linear-gradient and more for IE6+. All that warrants a Keanu Reeves-like WOAH, but there's a catch: it's VERY slow. All in all, unless your userbase is using ancient browsers, go ahead and use CSS3 while make sure older browsers show a degraded, but still useable version. The days CSS advancements were unuseable due IE6 and such being the dominant browsers are pretty much over. Slightly offtopic, but here's a snippet that I found on last.fm and was blown away by (although it's obvious, I just never thought of doing it): <!--[if lt IE 7 ]> <body class="ie ie6"> <![endif]--> <!--[if IE 7 ]> <body class="ie ie7"> <![endif]--> and so on. Makes for easy conditional CSS rules without the need for separate files.