Generate CSS3 gradients from an image!

In the days before CSS3 if your designer gave you a psd mockup with gradients you had one choice, make an image of the gradient. Now with CSS3, those days are gone.

But out with one problem, in with a new problem. Designers are usually pretty picky about their design, so now I need to guess-ta-mate the exact gradient. Using a site like this, you look at the gradient and do you best to match it up. The great thing is the code is generated for you. After your designer tells you 5 times that he doesn’t like your gradients you will start looking for a better way.

And here it is – http://www.gradient-scanner.com/. Just upload the image that has your gradient image on it and it will generate the code to match the gradient. While it is not perfect, it’s pretty darn good.

I found this suggestion from Paul Irish who suggested it on another site that had a nice solution… just not as nice as the gradient scanner solution.

Leave a Reply

Your email address will not be published. Required fields are marked *