Ultimate CSS Gradient Generator

November 2, 2010 at 1:34 pm in CSS3

The Colorzilla extention for Firefox is a handy companion for developers, and the folks behind it have just made things easier when it comes to creating nice-looking CSS3 gradients. Check out the Ultimate CSS Gradient Generator. With just a few mouse movements, you can create gradients that easily work across browsers, like this:

background: #f2f6f8; /* old browsers */
 
background: -moz-linear-gradient(
            top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%); /* firefox */
 
background: -webkit-gradient(
            linear, left top, left bottom, 
            color-stop(0%,#f2f6f8), 
            color-stop(50%,#d8e1e7), 
            color-stop(51%,#b5c6d0), 
            color-stop(100%,#e0eff9)
); /* webkit */
 
filter: progid:DXImageTransform.Microsoft.gradient( 
       startColorstr='#f2f6f8', 
       endColorstr='#e0eff9',
       GradientType=0 
); /* ie */

While it’s important to understand how gradients work, tools like this are great because they do the grunt work for us.

No comments

Leave a Reply

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