iosart.com | projects | articles | photos | about

New color tool – Ultimate CSS Gradient Generator

Just released the Ultimate CSS Gradient Generator – it’s a powerful online Photoshop-like CSS gradient editor that will output cross-browser HTML5 / CSS3 gradients and will complement the ColorZilla set of color tools.

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.

A few features in this first version of Ultimate CSS Gradient Generator:

  • A convenient ‘presets’ panel for pre-selecting a wide variety of gradients.
  • A gradient editor control that allows adding and removing stops, changing their color and position etc.
  • ‘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.
  • ‘CSS’ panel always has the CSS for the current gradient for easy copying and pasting into your stylesheet.

Check it out and let me know what you think :)

Important: 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.

The CSS Gradient Generator will also be included in the latest version of ColorZilla.


Credits: The ‘Ultimate Web 2.0 Gradients’ preset gradients were derived from the great work by deziner folio and SGlider12 (their work was released under Creative Commons Attribution-ShareAlike license). The Color Picker is a minor adaptation of John Dyer’s awesome Color Picker.

5 Responses to “New color tool – Ultimate CSS Gradient Generator”

  1. Ellsass Says:

    Hey Alex, I love the gradient generator (and ColorZilla!). There’s one thing that I haven’t seen yet on the web which I think would be useful for a tool like this: the ability to paste in existing code. For example, if I’ve already created a gradient and I want to make one of the stops a little more blue and move it slightly, it’d be great if I could just paste in my CSS, then use your GUI to make adjustments to it. Maybe that’s easier said than done, but a man can dream :)

    Keep up the great work!

  2. Gaurav Mishra Says:

    Hi Alex
    I just love the tool that you have created for the community out there
    It’s going to give a new push to people who like to design in the browser while following the graceful degradation. Saving images for CSS3 gradients is a big plus. I have tried so many CSS3 gradient tools but this is what designers and front end guy really need. I was thinking to post my comments from a week back but was not able to. So just making best use of the time now.

    Love your Work!
    Keep ROCKING!!!
    Greetings from India :D

    Gaurav M (Basically an artist in Web domain)

  3. Western Digital External Hard Drives Says:

    Fantastic thanks

  4. Online CSS Gradient Generator | Free Website Tools Says:

    [...] free tool by the creator of Colorzilla is the Ultimate CSS Gradient Generator, an online tool that easily lets you create and customize your own designs, or the given presets [...]

  5. Nicholas C. Zakas Says:

    This is a really great tool. Would you mind adding support for IE8′s -ms-filter as well? That would make this a one-stop shop for all gradients.

    Thanks!