CSS Gradient Generator

Easily create CSS gradients using this online generator. You'll be able to create either linear or radial gradients to use in your CSS files. CSS gradients are one of the more difficult techniques to learn, this generator will show you visually what the gradient looks like and produce all the necessary code to use. CSS gradients should work with all browsers that support CSS3. Also included are a few preset gradients that can be used to show you how to achieve different styles of gradients.

Gradient Options
Gradient Style:

Direction:
Gradient Stops
  Location: Color:  
Start:
%
 
End:
%
 

Add Stop
Gradient Presets

More presets coming soon.
Import CSS
Click to paste existing CSS background-image markup. Currently does not import gradients with custom degrees.
Preview
CSS Markup