CSS: Cross-Browser Gradient

April 14th, 2010 by jeremychone
background: #999; /* for non-css3 browsers */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */

Great simple tutorial about cross browser gradient

With RGBA for gradient

background: -webkit-gradient(
   linear,
   left bottom,
   left top,
   color-stop(0, rgba(0,0,0,.5)),
   color-stop(.49, rgba(0,0,0,.5)),
   color-stop(.5, rgba(29,29,29,.5)),
   color-stop(1, rgba(59,49,49,.5)));

Leave a Reply