Quick 3-Color CSS3 Gradient Generator

Step 1) Choose three colors for your gradient in the form below: Beginning color, ending color, and a stop (transition) color in the middle. If you'd prefer to only specify two colors, click here for the two 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.