“When I was your age – I had to build gradients in photoshop!”
CSS gradients are here to stay. Now that browser support is coming around there are some really cool sites popping up that lend a programmatic hand in creating your own. Below are the top 3 gradient generators in my book.
ColorZilla’s Ultimate CSS Gradient Generator is super intuitive, easy to use and packs the most punch in the group. Along with real time preview this generator also provides built in gradient templates that can be loaded from a swatch and modified to your liking.
All designers will immediately recognize the UI as the tools and swatches resemble that of design applications such as Photoshop.
Another great feature is the Hue/Saturation modification capabilites. With a slider tool you can adjust all of the colors in the gradient – while keeping the structure of the gradient in place. Changing a color theme couldn’t be easier.
This site also allows you to save your gradient out to a unique link making it possible to reference your gradient at a later time.
Display-inline’s CSS gradient generator is my number 2. A couple of things that stand out about this generator are the clean design, the ability to download the gradient as a .png file, browser compatibility table and directional gradients.
This gradient generator is a good option for straight forward basic gradients and building gradients from a mockup. The lack of a color picker and having to specify step position by percentage make ‘designing on screen’ difficult without a previously designed mockup.
The intuitive design, legacy browser support and the .png download make this generator worth a second look.
Rounding out the top 3 CSS Gradient Generators is the CSS3 Gradient Generator by Damian Galarza. Another great generator with the familiar color picker and sliders to aid in the on screen designing of gradients. The directional support and real time preview display are key elements this site has going for it. Stops can easily be added by clicking the “plus” sign next to ‘Color Swatches’ and positioned within the gradient with a slider.
What holds this site back is the lack of legacy browser support, the inability to save the gradient and the lack of any extras [reverse, undo and hue/saturation]. Still a great option and worth a look as you find the tools that match your needs.