Sometimes, online tools are more interesting and more useful than typical computers software. Looking for the best tool I have found two interesting products The Ultimate CSS Gradient Editor.
As you might know, HTML5 introduced many exciting features for Web developers. One of the features is the ability to specify gradients using pure CSS3, without having to create any images and use them as repeating backgrounds for gradient effects. Remember you’ll need a recent version of Firefox, Chrome or Safari to use this Gradient Generator. The resulting CSS gradients are cross-browser – they will work in these browsers and will also fall back to a simpler gradient in Internet Explorer. This tool was created by Alex Sirota (iosart).
The main gradient control allows you to:
- Adjust the gradient stop position by dragging the stop marker
- Adjust the stop color by double clicking on the stop marker
- Delete a stop by draggin the stop marker up or down
- Add a new stop by clicking anywhere in between the existing stop markers
You can use the ‘Stops’ panel to conrol the color and the position of the currently selected stop more precisely. The ‘Preview’ panel allows previewing the current gradient as a vertical or horizontal one, and also allows quickly previewing how the Internet Explorer fallback gradient will look in IE. Finally, the ‘CSS’ panel always has the CSS for the current gradient for easy copying and pasting into your stylesheet.
Another very similar tool online is CSS3 Gradient Generator (created by Damian Galarza).
Because the new IE9 doesn’t support css3 gradients and text-shadows in normal way (Bill why?) – I’ve found a nice article how to get CSS Gradients for IE9 in a non ms-filter way: http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/
Short summary
Using CSS3 gradient saves an HTTP request, this is a way to improve page load time, so your webpage will be a little bit quicker. But wait, there is another advantage to using CSS3 gradients, and that is that these gradients are created programmatically through numbers. You don’t need to use image editing program to change colors.
On youtube.com you can finds some nice lessons how gradients under css3 are working, I recomend to see these two movies from SitePoint:
http://www.youtube.com/watch?v=KDDCbjGg3gI
http://www.youtube.com/watch?v=kFA9JCn3vEQ