CSS Gradients via Canvas Examples

The following two boxes are from WebKit's Background Gradients Example (a couple browser-specific background properties are disabled in the first one):

It appears that your browser doesn't support CSS Gradients, neither natively nor via Canvas. The gradients you see below are regular externally-loaded PNG images that demonstrate the CSS gradient effects; the gradients were generated from this Canvas implementation of CSS Gradients (see browser support above).

Note the following WebKit radial gradient example is very dificult to reproduce using Firefox's syntax. Special thanks to Mark McLaren for writing a close fascimile which appears below:

Here is a bonus diagonal rainbow…but wait, there's more! Clicking on the element causes its width to increase and when it does, its gradient is adjusted (see notes above).