ɹəəpıɔnı

CSS Gradient Generator

This is the beginnings of a cross-browser CSS gradient generator - currently only a simple, two-colour, horizontal gradient. Plan is to add support for everything that's possible with both linear and radial gradients.

Sofar it's been tested in Firefox 3.6.4, Chrome 5.0.375.70 and Opera 10.60 beta (all on Windows). However, it should also work in all versions of Firefox from 3.6 onwards, all versions of Opera from 9.0 onwards and all versions of Chrome.. ever.. :P

PreviewGenerated CSS

Caveats

IE Support
Not only will this not generate code for IE, but this gradient generator script probably won't even work in IE at all yet.
However, I'm not ignoring IE - support will be added if possible. Gradients might (I believe) be possible in IE using -ms-filter:'progid:DXImageTransform.Microsoft.Gradient()' or some such madness.
Chrome/Safari/Webkit vendor-specific support
Webkit supports CSS gradients via the -webkit-gradient() property value. However, the SVG background method used here also appears to work fine (and is more standards compliant), so doing both is redundant.
Old browser support
Tested in ~current versions only at the mo.

Credits

Idea suggested by Bruce Lawson, color-picker widget/shim adapted from Jan Odvarko's excellent jscolor.js lib, and the (hopeful) HTML5 support detection (which may as yet not actually work) is inspired by miketaylr.