CSS: Desenfoque e invierta colores para toda la página

Cuando se usan los filtros webkit “desenfoque” e “invertir”, solo funciona el desenfoque. Y si se elimina “desenfoque”, “invertir” funciona.

Además, solo Chrome y Opera están respondiendo al código.

¿Hay alguna manera de hacer que esto funcione para las versiones recientes de IE y 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); } 

Puede usar el elemento foreignObject svg para importar el contenido de todo el body en un elemento svg y luego aplicar los filter s en el foreignObject que aplicará los filter en todo el body .

Soporte de navegador para filtros svg vs filtros CSS .

Demostración en CodePen

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