Transparency Gradients using CSS

The latest site I’ve been working on has used gradients, but with one end resulting in transparency. Here’s a quick demonstration of how you get there with CSS.

#canvas {

background: #FFFFFF; /* Well hello, useless IE! */
-moz-linear-gradient( /* Firefox transparency gradient */
center top,
rgba(255,255,252,1) 100%, /* Opaque White */
rgba(255,255,252,0.1) 5% /* Transparent White */
background: -webkit-gradient( /* Chrome and Safari transparency gradient */
left top,
left bottom,
color-stop(1.00, rgba(255,255,252,1)), /* Opaque White */
color-stop(0.05, rgba(255,255,252,0.1)) /* Transparent White */


This particular coding uses white at the top of the #canvas, turning into nearly complete transparency at the bottom. As you can observe, Internet Explorer once again doesn’t want to come to the party, so one has to except for the meantime that a plain white background is all we can use for those users. Alternatively, I’ve been informed the following can work for IE8 (and remove -ms for IE 6 and 7):

-ms-filter: progid:DXImageTransform.Microsoft.gradient
(gradientType=1, startColor=0, endColoStr=#FFFFFF);

Will post a link to the site in question once it has been launched.


Leave a Reply

Your email address will not be published. Required fields are marked *