Posts Tagged ‘svg’

Gradient Generator

Wednesday, April 18th, 2012

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.


  • 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:!

    Gradient Generator Screenshot