CSS3 gradiant alternative available for IE9


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...
Problem courtesy of: KunJ 웃


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.

Solution courtesy of: Praveen Puglia


You can make gradients work in IE9 Check this -- Colorzilla

Discussion courtesy of: Nishant

This recipe can be found in it's original form on Stack Over Flow.