htmlcssblurdocument-bodycss-filters

CSS: Blur and invert colors for entire page

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);
}
Solution

  • 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>