Quick 2-Color CSS3 Gradient Generator

Step 1) Choose two colors for your gradient in the form below: Beginning color and ending color. If you need to specify a third, middle color, click here for the three color gradient generator.

This will produce gradients in which these colors are spread out in an equidistant manner (assuming you are using Firefox 3.6+, Chrome or Safari). If you wish to change the spread, you'll need to use a more sophisticated tool, or make the adjustments manually.

Step 2) Three styles of gradients are shown below. Copy/paste the code next to the style you like into your stylesheet wherever you need the gradient. Just change ".mygradienttop" or ".mygradientleft" or ".mygradientradial" to whatever class or id you prefer.