Home/ Questions/Q 8595073
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T00:20:59+00:00

I’ve been looking for a solution to background gradients that work in modern browsers

  • 0

I’ve been looking for a solution to background gradients that work in modern browsers and versions of IE down to 7. If someone has a best practice that works, I would appreciate the method as I keep running into solutions that break on a certain browser or version. It should atleast work in IE7-9, Firefox, Safari, Opera, and Chrome.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As other have said, CSS3 is compatible with FF, Chrome etc.

    For IE9, you can use their official CSS Gradient Background Maker, which will generate an inline SVG image, supported also by most of modern browsers (although it give some issues on Safari).

    For IE8, you can use 

    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#000000, GradientType=1);

    Reference

    For IE 5.5 – 7:

    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FFFFFF, endColorStr=#FFFFFF, GradientType=1);

    Reference

    startColorStr and endColorStr are pretty self-explanatory. GradientType is 1 for horizontal and 0 for vertical. There’s no such thing as radial nor diagonal gradients before IE9.

    I strongly suggest you not to use an htc solutions (like css3pie) as they give a lot of side effects.

    It’s not really easy to implement, but if you need a polyfill there’s cssSandpaper.

    • 0