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.
