Read more

IE9: Linear gradients remove border-radius and inset box-shadows

Henning Koch
May 11, 2012Software engineer at makandra GmbH

Microsoft does not support IE9 anymore, and neither do we.

When you add a linear gradient to an element, IE9 removes all border-radius and inset box-shadows. This is because you probably are doing linear gradients with this weirdo Microsoft filter:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
Illustration UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
Read more Show archive.org snapshot

filter hijacks the rendering of the entire element box, so you're out of luck. IE9 doesn't support CSS gradients.

A forward-looking workaround is to not use gradients and emulate your gradients with box-shadows instead. Use a wide spread inset shadow on a plain background color and the result will look much like a gradient. This will make the box appear in a plain color in IE8.

So don't get fooled by IE9's half-assed support of many new CSS attributes - it's still the piece of shit you always hated.

Posted by Henning Koch to makandra dev (2012-05-11 01:00)