Cross browser gradients with CSS3 and SVG

Since I’m currently taking a course on SVG (Scalable Vector Graphics) with the W3C I thought of a very simple yet cool application for it: gradients.

Most of you certainly know how to visually enhance your web apps, using proprietary CSS gradient properties in Webkit or Gecko based browsers (like Firefox, Chrome or Safari). But CSS gradients aren’t (yet) available to IE or Opera. From this perspective CSS gradients can only be used for progressive enhancements on a small subset of browsers (at least on the desktop, most mobile browsers are Webkit based) and you must be careful with browsers that won’t display them. However Opera has the best support for SVG and Microsoft is committed to SVG with IE9. So bang! Now SVG can complement CSS3 to widen your audience for cool stuff without the need for graphics or images.

Note that this post won’t go into the details of gradients (I’ll point to various resources at the end of the article) but will simply walk you through cross browser gradients implementation using both CSS3 and SVG. So let’s dot it.