CSS: How to Fill a Div with Gradient Background Color across most Browsers with CSS Programming 07 MAY 2012

Gradient colors are pretty awesome, pretty to look at and a nifty visual effect.

Unfortunately for us though, CSS standards when it comes to handling gradients was pretty lacklustre over the years, resulting in all the major browsers pretty much defining their own browser specific CSS rules to achieve gradient background colors.

The following is a CSS example indicating how to achieve a gradient color which will appear in just about all major browsers. Of course, the only way this works is by defining the browser specific CSS rules for pretty much every available browser rendering kit…

.gradientdiv {
background-color: #57ceaf;
background-image: -webkit-gradient(linear, left top, left bottom, from(#5ec4e5), to(#50d97a));
background-image: -webkit-linear-gradient(top, #5ec4e5, #50d97a);
background-image: -moz-linear-gradient(top, #5ec4e5, #50d97a);
background-image: -o-linear-gradient(top, #5ec4e5, #50d97a);
background-image: -ms-linear-gradient(top, #5ec4e5, #50d97a);
background-image: linear-gradient(top, #5ec4e5, #50d97a);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#5ec4e5', EndColorStr='#50d97a');


Related Posts:

About Craig Lotter

South African software architect and developer at Touchwork. Husband to a cupcake baker and father to two little girls. I don't have time for myself any more.