I am trying to stylize my button in extjs. The following works in all browsers except IE. Can anyone tell why this is happening?

.x-btn-default-toolbar-small {
    background-image: -webkit-linear-gradient(top,#DBEEFF,#D0E7FF 48%,#BBD2F0 52%,#BED6F5);
    background-image: -moz-linear-gradient(top,#DBEEFF,#D0E7FF 48%,#BBD2F0 52%,#BED6F5);

    border-color: red;
    background-color: grey;
    border-color:#81A4D0;
}
.x-btn-default-toolbar-small-over {
    background-image: none;
    border-color: blue;
    background-color: transparent;
}

• css
• button
• extjs

IE9 doesn't support CSS gradients either but you can achieve exactly the same effect by using a url reference to an SVG defined gradient.

There are a few limited online generators that will create the equivalent SVG code for you but if you'd like to generate the SVG code for all possible CSS linear and radial gradients then see the small app at VisualCSSTools.

(IE10 will support CSS linear and radial gradients).