Gradient-filled colorful boxes – in CSS

Want to make a nice gradient colored box without using ugly background images? Just apply this set of rules to any element, like DIV:

 
 
 
 
 
 
 
 
 

 
 
 

background-color: #00FF00;
background-image: -moz-linear-gradient(top, #00FF00, #FFFF00); /* Firefox */
background-image: -ms-linear-gradient(top, #00FF00, #FFFF00); /* IE10 */
background-image: -o-linear-gradient(top, #00FF00, #FFFF00); /* Opera  */
background-image: -webkit-gradient(linear, left top, left bottom, from(#00FF00), to(#FFFF00)); /* Safari/Chrome */
background-image: -webkit-linear-gradient(top, #00FF00, #FFFF00); /* Chrome 10/Safari5 */
background-image: linear-gradient(top, #00FF00, #999999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#00FF00', EndColorStr='#FFFF00'); /* IE8 */

The result:

This entry was posted on Monday, May 2nd, 2011 at 2:22 am and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply

 
TopOfBlogs Web Development & Design Blogs