Sunday, July 27, 2014

Best Resource to Convert Photoshop Gradients to Cross Browser CSS

On a lot of my web site mockups in Photoshop I like to use gradients in the top navigation or for the page background.  To minimize the number of images used on the site I use CSS wherever possible.  An invaluable tool for creating CSS gradients is called The Ultimate CSS Gradient Genrator.  It will generate css gradients which work across multiple browsers.

It's very easy to use, you simply copy the beginning and ending hex numbers from Photoshop over to the tool on The Ultiamte CSS Gradient Generator site, the css code is generated off to the right and you copy and paste that over to your site's style sheet!
You can access the tool here: http://www.colorzilla.com/gradient-editor/