Cross-Browser CSS Gradients

March 15, 2012

Heres a quick snippit to allow you to show CSS Gradients in all 3 major browsers

Hello Gradient World!

Just re-load this in IE, Firefox, Safari, or Chrome...should look similar on all 3 without any CSS Background Sprites!

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C1D11C), to(#FFFFFF)) rgb(246, 246, 246);
background:-moz-linear-gradient(center top , #C1D11C, #FFFFFF);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#C1D11C, endColorStr=#FFFFFF);


This is a super useful URL to visualize and generate the gradients too

Image Description

Steve McNiven-Scott

Best\Only Blogger on this site. Therefore defacto blogger of the year Award Winner.