Also available at ajh.us/ms-gradient
Reference box. Standards-based gradient syntax.
Two boxes. Microsoft-only syntax.
The first uses the `filter` property (which conflicts with the newer, unrelated `filter` property in CSS level 3 and generates warnings in non-MS browsers). The value includes an unquoted colon, which further irritates CSS parsers and can also cause warnings. It works through IE 9.
The second uses nearly the same exact line of code, except the property name is prefixed with `-ms-` and the value is quoted. A black background indicates that the current syntax is not understood by your browser. This version works in IE 9 and IE 8 standards mode, but not IE 7 or lower. It causes less complaining from modern browsers.
Screen shots:
IE8 "compatibility" rendering (like IE7)
IE8 rendering
IE9 rendering
IE10 rendering
.green-standards {
background: linear-gradient(to bottom, #9ac64b 0%, #75a32f 100%);
}
.green-old-ms {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ac64b', endColorstr='#75a32f', GradientType=0 );
}
.green-new-ms {
-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ac64b', endColorstr='#75a32f', GradientType=0 )";
}