Home

Cross-Browser CSS Linear Gradients

Published on 6/16/2011


`.gradient
{

background-color: #DDDDDD; /fallback/
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CCCCCC)); /safari4+,chrome/
background-image: -webkit-linear-gradient(top, #FFFFFF, #CCCCCC); /chrome10+,safari5.1+/
background-image: -moz-linear-gradient(top, #FFFFFF, #CCCCCC); /ff3.6+/
background-image: -ms-linear-gradient(top, #FFFFFF, #CCCCCC); /ie10/
background-image: -o-linear-gradient(top, #FFFFFF, #CCCCCC); /opera11.1+/
background-image: linear-gradient(top, #FFFFFF, #CCCCCC);

zoom:1; /iefix/
/GradientType 0=vertical, 1=horizontal/
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorStr=‘#FFFFFF’, EndColorStr=‘#CCCCCC’);

}`

... views