Cross Browser CSS Gradient Rule

Wednesday, 14. September 2011

Want a cross browser css gradient rule for your site?

You may want to try this small CSS rule that seems to work a treat for me!

Description

/*Webkit Browser: Chrome, Safari*/
background: -webkit-gradient(type, startX startY, endX endY, from(#startcolor), to(#endcolor)); 
 /*Firefox*/
background: type(startPoint,  #startcolor,  #endcolor);
/*IE - if you care!*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#startcolor', endColorstr='#endcolor');

Example

background: #ccc; /* fallback for older/non-css browsers */
 
background: -webkit-gradient(linear, left top, left bottom, from(#dedede), to(#000));
background: -moz-linear-gradient(top,  #dedede,  #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dedede', endColorstr='#000000');
How Do I Look? :)

Oh! you get the idea!

Leave a Reply

You must be logged in to post a comment.