Creating a coloured gradient background without images

Update: This article was written long before CSS gradient support was widespread. I’d strongly advise using CSS to create gradients in an modern web browswer!

Here’s some code to dynamically create a gradient background without using images. The width and/or height of each colour band, as well as the total number of colour bands can be easily changed.

You can use “createGradientV” to create a vertical gradient (North to South), or “createGradientH” to create a horizontal gradient (West to East). Each of the functions takes one or more sets of 4 parameters, documented in the code.

To add more colour bands, simply add more sets of parameters to the relevant “createGradient” method calls.

This code has been tested working on IE/Win 6, NN/Win 7, Opera/Win 7, FF/Win, FF/Mac, and Safari/Mac. It does NOT work on IE/Mac (tested on version 5.22).