CSS3 gradiant alternative available for IE9

Question

I am working on app which platform is targeted to modern browsers but exceptionally its required to run on IE9 which doesn't supports CSS3 gradient. Can anyone please suggest any alternative (except SVG) would benefit me greatly.

.GRAD_LINEAR(@start:#EEA611; @end:#E3EE11) {
  background: @start;
  background-image:-webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
  background-image:-webkit-linear-gradient(top, @start, @end);
  background-image:-moz-linear-gradient(top, @start, @end);
  background-image:-o-linear-gradient(top, @start, @end);
  background-image:linear-gradient(to bottom, @start, @end);
  //Your suggestion...
}

Answer 1

There are several ways you can achieve this.

1. Try ColorZilla Gradient Editor. Since Microsoft provides its own filters, something like

   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

   will be fine for you.

2. Use an HTC file, something like CSS3 PIE which adds the necessary functionality to older versions of IE to emulate modern CSS3 features. It has its own pros and cons but worth a shot.

3. The next, least recommended, way of doing it will be using images. But then you will increase the number of HTTP Requests your application makes. Also if an image fails to load, your element might look ugly.