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');
}

Nifty.

About Craig Lotter

Software developer, husband and dad to two little girls. Writer behind An Exploring South African. I don't have time for myself any more.