Gradient Generator

I have been working a browser based gradient generator. I’ve never had the best experience using gradient generators, so I decided to see if I could do better.

It is a prototype right now (a weekend project), but I am hoping to do more with it as time permits.

Features

  • It outputs to CSS, Canvas, and SVG
  • Allows for separate color and alpha stops
  • Keyboard support (left, shift+left, right, shift+right, ctrl+c, ctrl+v)
  • You can Copy/Paste current stop
  • Undo/Redo
  • Easily sharable URLs with the hash tag Example gradient or a GET parameter (Example with GET parameter).
  • Local Storage Support to keep track of your work
  • Potential Future Features

    • Support for radial gradients
    • Cross browser CSS output
    • Saving your gradients to server
    • Multiple layers for stacked gradients
    • More CSS 3 effect generators (box shadows, rounded corners, etc) built into the UI
    • Any other ideas? Leave a comment or tweet them to @bgrins!

    I haven’t come up with a better name yet, so check it out here: http://briangrinstead.com/gradient!

    Gradient Generator Screenshot

    Tags: , , , ,

7 Responses to “Gradient Generator”

  1. David O'Sullivan Says:

    Hey there,

    I think this is pretty great! Whats the chances of being able to use this in our own apps? There are lots of online CSS gradient generators out there, but no scripts that we can down load and integrate into our own user interfaces- not that I can find anyway? Would you consider distributing the code OpenSource?

    Let me know

    David

  2. Steve Says:

    Tim told me about your color picker and we were talking about a gradient generator and lo and behold. Nice work

  3. Brian Says:

    David,
    I am going to see what I can do about that going forward, but it is contained inside another project right now. However, most of the components I have used to make this are open source:

    Color Picker

    Color Parsing

    Angle Picker

    I’ll keep you posted on how to bring integration to another app if possible.

  4. Web Design Says:

    Web Design…

    […]Gradient Generator – Brian Grinstead[…]…

  5. David O'Sullivan Says:

    Hey Brian,

    Thanks for the update there, it would be awesome if you could make it a downloadable jQuery plugin or something!

    Look forward to hearing more;)

  6. David O'Sullivan Says:

    Any updates on this? I have found this http://codecanyon.net/item/jquery-gradient-creator/2054676 but it does not have alpha transparency which is the real plus of yours. I’d be happy to pay you something similar for yours ;)

  7. Anthony Silver Says:

    Perhaps the best gradient generator I’ve ever seen. Conceptually magnificent to separate the alpha and colour leading to an elegant, intuitive and functional interface. Excellent vision and super implementation. Congratulations Brian, and thank you for sharing this! Within a minute I was able to vastly improve a gradient I had been working on. This is firmly in my favourites and I will be watching with interest other projects of yours now.

Leave a Reply

Posting Code: Use html such as <pre lang='javascript'></pre>. See all supported languages.

CAPTCHA Image
*