---
title: CSS3 Filter - Invert support in Internet Explorer 10+
description: >-
  CSS3 introduced one of the very fancy features to do some creative things – “Filters”. Now we can
  make our images grayscale, blur it, change hues etc –...
url: https://expiredqueues.com/css3-filter-invert-support-in-internet-explorer-10/
date: '2015-06-16T19:35:38.000Z'
image: >-
  https://expiredqueues.com/images/og/css3-filter-invert-support-in-internet-explorer-10-56db29ab.jpg
---

Written in June 2015. Much of what it describes has since changed or disappeared; it is kept as a record of how the web used to work, not as advice.

Plugins posts css3

# CSS3 Filter - Invert support in Internet Explorer 10+

16 June 2015 By Adrian 1 min read

CSS3 introduced one of the very fancy features to do some creative things – “Filters”. Now we can make our images grayscale, blur it, change hues etc – everyone is happy about it.

Here is a list of the browsers that support this feature:

1. Chrome (prefixed)
2. Firefox
3. Safari
4. Opera

and then we have Internet Explorer which still hasn’t put it on the shipping list yet. At the time I am typing this – Internet Explorer 11 also doesn’t support CSS3 Filters.

Statements from IE:

- <https://msdn.microsoft.com/en-us/library/ms530752(v=vs.85).aspx>
- <https://developer.microsoft.com/en-us/microsoft-edge/platform/catalog/?q=specName%3Afilter-effects-1>

> Update: Microsoft Edge has shipped this feature as of Build 10586+

I had a requirement to invert white images into black. This was when the user switches themes on the website. Hence created this small useful plugin that takes the current image and uses an SVG filter solution to invert it into black.

## [InvertImages](https://expiredqueues.github.io/InvertImages/)

Usage is pretty simple.

Let us say you have a white image:

```html
<img src="images/icon-home.png" alt="Home Page" class="icon-home">
```

And you wish to change this image into black, all you have to do is:

```js
$("img.icon-home").invertImages();
```

For more options, please read this Wiki:  [InvertImages jQuery Plugin Wiki](https://github.com/expiredqueues/InvertImages/blob/master/README.md)

[Previously IT FITs Version 2.0 - Our most popular responsive template](https://expiredqueues.com/it-fits-version-2-most-popular-responsive-template/) [Next Context Menu using AngularJS Directive](https://expiredqueues.com/custom-context-menu-directive/)

## Structured data

```json
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "CSS3 Filter - Invert support in Internet Explorer 10+",
  "datePublished": "2015-06-16T19:35:38.000Z",
  "dateModified": "2015-06-16T19:35:38.000Z",
  "author": {
    "@type": "Person",
    "name": "Adrian",
    "url": "https://expiredqueues.com/about/"
  },
  "publisher": {
    "@type": "Person",
    "name": "Adrian"
  },
  "mainEntityOfPage": "https://expiredqueues.com/css3-filter-invert-support-in-internet-explorer-10/",
  "keywords": "posts, css3, filters, svg",
  "articleSection": "Plugins"
}
```