How to Disable a CSS Filter in Internet Explorer

Do you have an active filter in the CSS of your website that greatly benefits the design in most browsers, but for whatever reason, need a way to selectively disable it? Whether it’s to create a nice transition where the filter is disabled, you are making stylesheets for specific versions of IE, or you are using media queries to selectively add certain design elements, you will likely run into the problem of having to remove a CSS filter from an element without removing the rule that originally enabled it.

I like to go to my happy place when trying to fathom the nuances of proprietary Microsoft browser behavior

It actually couldn’t be any easier to disable. Simply restate the filter that is currently active that you would like to disable, and in the properties for it, enter enabled = false. Simple enough! So let’s say we had a shadow filter, that’s being used to create a drop shadow and regular shadow for cross-browser compatibility. It might look something like this:

This gives us a nice, tasty shadow to work with in IE. But let’s say we wanted to disable it.  We actually want to REMOVE the filter so that it no longer applies to our elements of class “shadow.” We would simply need to restate the filters with the properties to disable them, like so:

This code will disable those filters so that your elements will no longer have that shadow. And this should actually work to disable every filter, including  Alpha, BasicImage, Blur, DropShadow, Emboss, Engrave, Glow, Light, MaskFilter, MotionBlur, Shadow, and Wave filters.

I have been told that “filter: none;” works for some browsers, but will not work for -ms-filter.

Let me know if this works for you in the comments. If you need additional help with your CSS or web project, that’s what I do for a living! You can reach me at brian@pagecrafter.com.