Gradient Generator

This generator will produce either vertical or horizontal gradients that can be used in your web page design. Simply enter the details of the gradient into the form below and click 'Generate It'.

If you wish to produce gradients using CSS, please visit our friends at CSSPortal and check out their CSS Gradient Generator.

Step 1

Select your Start and End colors.

Start Color :
End Color :

Step 2

Select the size and direction of the gradient.

Height :
Width :
Direction : Vertical Horizontal

Step 3

Create Gradient Image.

Generated Gradient

Gradient Generator

To save, right click on image and select 'Save picture as'.