CSS3 Gradient Generator v2.0

Welcome to the CSS3 Gradient Generator! Please be aware that in order to make the most use of this utility you will need either a webkit browser such as Safari or Google Chrome, or the Firefox 3.6 beta. Currently Internet Explorer does not support CSS based gradients. This tool is updated whenever implementation methods are changed.

Updates

Mozilla CSS Gradient Support12/02/2009

With the release of Firefox 3.6b Mozilla introduced support for CSS based gradients. After lots of user feedback, the implementation of CSS gradients in Firefox was changed. This generator uses the latest implementation of Mozilla gradients found here.

Other Changes:
CSS RGB color values are now used.
When adding a new swatch, a progressive color is used to help you with your gradient.
Users can now generate a random gradient, great for showcasing CSS gradients.

Information

The CSS3 Gradient Generator was created as showcase of the power of CSS based gradients as well as a tool for developers and designers to generate a gradient in CSS.

CSS gradients generate an image result, meaning the result of a CSS gradient can be used anywhere an image can be used, be it a background-image, mask,border, or list item bullet.

Notes and Features to Come

There is still more work to come and I'm working on adding some more features to the gradient generator. Below are some features to come soon.

  • Currently only linear gradients are supported, Radial Gradients coming soon.
  • Add the ability to choose either hex or RGB colors

Don't See a Gradient Sample?

Make sure you're using a Webkit browser such as Safari or Chrome OR use Firefox 3.6 Beta.

Details:

Add Swatch Add Icon
Click this icon to add a new color swatch to your gradient palette.
Remove Swatch Remove Icon
Click this icon to remove the swatch from your gradient palette.
Select Swatch Swatch Example
Click the swatch to select it and then use the color picker on the right to apply a color to the selected swatch.
Adjust Color Position Position Slider
Use the slider associated with each color swatch to adjust the position for the color in the gradient.
Adjust Gradient Direction Direction Controls
You can adjust the direction of the gradient using the direction controls. You have the power to use the general keyword directions (left, right, bottom, top) or to specify numeric points for the gradient start and end points.

Generator

Gradient Direction

Select the direction for the gradient.

Color Swatches

Add Swatch Generate Random Gradient

Select colors to make up your gradient.

    Sample

    Gradient Sample

    Sample Button

    Code

    							-webkit-gradient(
								linear
								left top,
								left bottom,
								color-stop(0.5, #333333),
								color-stop(0.8, #494949)
							)

    Color Picker

    Choose a color for your selected swatch using the color picker below.