Visit the CSS3 Webkit Gradient Generator
CSS gradients are quite powerful and very useful, but when taking a first look at the markup for writing a code based gradient it can appear daunting. This is why I’ve decided to create the CSS3 Webkit Gradient Generator. Please note that the generator is intended to be viewed in a webkit browser. Live sampling of the gradient will not be available without a webkit browser.
The gradient generator has 2 goals. The first is to provide a showcase for the power of CSS gradients. The second, is to provide a graphical user interface in which a user can visually create gradient code to use in their CSS where they see fit. In order to do this, I tried to create a UI that appears familiar, such as that of a graphic editing tool like Adobe Photoshop. Providing color swatches to make up the gradient and a slider for each to determine the color’s position in the gradient.
Color Swatch Control
Once a color swatch is selected the user can use the color picker found on the right to adjust the swatch’s color. The color picker is provided by the ColorPicker jQuery plugin from eyecon.ro.
Gradient Direction Control
Along with this control, I have added the ability to set the direction of the gradient, allowing the user to take advantage of the keywords that are available (left, right, bottom, top) or use custom point locations.
Live Sampling
The generator provides live sampling, meaning any changes that are made to the controls on the page will immediately update the color sample and the CSS code output.
Note: Live sampling of the gradient colors requires a webkit browser.
Coming Soon
There are still more features to be implemented. Currently, the gradient generator only supports linear gradients. I’m working to provide radial gradient support in the near future. Also, currently the generator will only accept hex color values, I am planning on adding RGB support soon as well.
Let me know what you think of the generator so far as well as any features you may like to see.
Nice generator! Good work, I’m using it during my designing processes.
Its great – but here is an example how to implement css gradients in other browsers as well:
http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/
shouldn’t be hard to add that to the generator
This is a very handy tool. Nice work!
Could you please make the color hex input box handle pasting with a leading “#”? It currently strips off the last digit and keeps the hash.
Thanks,
Alex
Love the Gradient Generator, but out of interest why did you change to rgb from #XXXXXX based colors, which are much more readily accessible?
With that in mind I think adding an option to toggle between to two color definition modes would be a great addition
Metric, while its true IE supports simple code based gradients through its filters, these gradients only support 2 colors and are not considered CSS3 implementation. Unfortunately for right now they are not worth the effort. Hopefully in IE9 we will see some CSS3 gradient support.
Hi Alex, I’ll see what I can do to allow support for this.
Hi Steven, thanks for the support. I moved from hex to rgb to support alpha levels in rgba later on. I had been throwing around the idea of adding the option to toggle between color types but wasn’t sure if anyone would be interested in it. I’ll look into adding this soon.
Hi Damian,
thank you for creating this awesome gradient generator and sharing it
This rocks, thanks.
I’ve been using CSS3/chrome to mockup my web pages, what with their support of gradients, rounded corners and drop shadows. this helps with the gradients.
On the nitpicky end, it would be easier on the mouse if the Color Swatches column was adjacent to the Color Picker since there’s a lot of jumping back and forth there. Or even better if adding a new color just added a new Color Swatch box and slider to the page so clicking between swatches wouldn’t be necessary.