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.