CSS: Blur and invert colors for entire page

Question

CSS: Blur and invert colors for entire page

3k views Asked by Gabriel Meono At 23 December 2014 at 03:35

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

Original Q&A

There are 2 answers

eric eisher On 08 July 2022 at 07:40

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
}

**Weafs.py** · Accepted Answer · 2014-12-23 03:59:20

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>

TechQA.

CSS: Blur and invert colors for entire page

There are 2 answers

`Demo on CodePen`

Related Questions in HTML

Related Questions in CSS

Related Questions in BLUR

Related Questions in DOCUMENT-BODY

Related Questions in CSS-FILTERS

Popular Questions

Popular Tags

Trending Questions