CSS: blur and invert colors for the entire page
When using both webkit filters "blur" and "invert" only blur works. And if "blur" is removed, then "invert" works.
Also, only Chrome and Opera are responsible for the code.
Is there a way to make this work for the latest IE and Firefox?
body {
-webkit-filter: invert(100%);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
source to share
You can use an element svg
foreignObject
to import all content body
into an element svg
and then apply filter
to foreignObject
, which will apply filter
to everything body
.
Browser support for svg
filters vs CSS filters .
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 filter
to an event, you can first remove the attribute filter
from the element foreignObject
and apply that method filter
using JavaScript.
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>
source to share