CSS: Blur and invert colors for entire page

Question

When using both webkit filters "blur" and "invert", only blur works. And if "blur" is removed "invert" works.

Also only Chrome and Opera are responding to the code.

Is there a way to make this work for recent IE and Firefox versions?

body {
-webkit-filter: invert(100%);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}

You need `svg` filter for [maximum browser support](http://caniuse.com/#search=svg%20filter). This answer should help ---> http://stackoverflow.com/questions/27583937/how-can-i-make-a-css-glass-blur-effect-work-for-an-overlay/27584323#27584323 — Weafs.py, Dec 23 '14 at 03:37
just put them together -webkit-filter: blur(5px) invert(100%); — jaakkoj, Dec 23 '14 at 04:24

Weafs.py · Accepted Answer · 2014-12-23T04:52:06.023

You could use svg's foreignObject element to import the entire body's content into an svg element and then apply the filters on the foreignObject which will apply the filters on the entire body.

Browser support for svg filters vs CSS filters.

`Demo on CodePen`

html, body {
  width: 100%;
  height: 100%;
  background: #222222;
  margin: 0;
}

<body>
  <svg width="100%" height="100%" style="position: absolute; left:0;top: 0;">
    <defs>
      <filter id="blur-and-invert">
        <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
        <feColorMatrix type="saturate" values="1" result="fbSourceGraphic" />
        <feColorMatrix in="fbSourceGraphic" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0 " />
      </filter>
    </defs>
    <foreignObject width="100%" height="100%" filter="url(#blur-and-invert)">
      <!-- Here goes the content -->
      <img src="http://lorempixel.com/450/300/sports" width="100%" height="100%" />
    </foreignObject>
  </svg>
</body>

If you want to apply the filter on an event, you could remove the filter attribute from the foreignObject element initially and apply the filter using JavaScript this way.

var body = document.getElementsByTagName('foreignObject')[0];

body.setAttribute('filter', 'url(#blur-and-invert)')

var body = document.getElementsByTagName('foreignObject')[0];

body.setAttribute('filter', 'url(#blur-and-invert)')

html, body {
  width: 100%;
  height: 100%;
  background: #222222;
  margin: 0;
}

<body>
  <svg width="100%" height="100%" style="position: absolute; left:0;top: 0;">
    <defs>
      <filter id="blur-and-invert">
        <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
        <feColorMatrix type="saturate" values="1" result="fbSourceGraphic" />
        <feColorMatrix in="fbSourceGraphic" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0 " />
      </filter>
    </defs>
    <foreignObject width="100%" height="100%">
      <img src="http://lorempixel.com/450/300/sports" width="100%" height="100%" />
    </foreignObject>
  </svg>
</body>

score 2 · Answer 2 · edited Jul 08 '22 at 20:45

There's a simple way to do this. Especially if it's just a hack. In this case I'll just show you inverting colors but I'm sure the blur effect would work as well.

Basically create a Div and place it anywhere in your code. Absolute position it and make sure it's full width and height of your browser. Set the z-index to 1000 (just make it the top layer) and then apply an invert transparency mode with a background color of white.

// place this anywhere in your HTML
<div class="invert"></div>

//add this css
.invert {
  height: 100vh;
  width: 100vw;
  position: absolute;
  top: 0;
  z-index: 1000;
  background: #fff;
  left: 0;
  mix-blend-mode: difference;
  pointer-events:none; //disable interactivity
}

CSS: Blur and invert colors for entire page

2 Answers2

`Demo on CodePen`

Linked