Apply a CSS filter to blur and invert the colors of the entire webpage

Question

Apply a CSS filter to blur and invert the colors of the entire webpage

When using both webkit filters "blur" and "invert", only the blur effect is functioning properly. However, if the "blur" filter is removed, then the "invert" filter works as intended.

As of now, only Chrome and Opera browsers are responding correctly to the code.

Is there a solution to make this code work for recent versions of Internet Explorer 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);
}

html css blur document-body css-filters

Answer 1

Answer №1

You have the option to utilize the svg element's foreignObject feature to bring the entire content of the body into an svg element and then implement the filters on the foreignObject, which will consequently apply the filters to the entire body.

Compare browser support for svg filters and CSS filters.

`Check out the 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)">
      <!-- Insert your content here -->
      <img src="http://lorempixel.com/450/300/sports" width="100%" height="100%" />
    </foreignObject>
  </svg>
</body>

If you wish to apply the filter to an event, you have the option to first remove the filter attribute from the foreignObject element and then apply the filter dynamically using JavaScript in the following manner.

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>

Answer 2

You have the option to utilize the svg element's foreignObject feature to bring the entire content of the body into an svg element and then implement the filters on the foreignObject, which will consequently apply the filters to the entire body.

Compare browser support for svg filters and CSS filters.

`Check out the 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)">
      <!-- Insert your content here -->
      <img src="http://lorempixel.com/450/300/sports" width="100%" height="100%" />
    </foreignObject>
  </svg>
</body>

If you wish to apply the filter to an event, you have the option to first remove the filter attribute from the foreignObject element and then apply the filter dynamically using JavaScript in the following manner.

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>

Answer 3

Answer №2

If you're looking for a quick and easy method to achieve this effect, especially if you're just experimenting with code, I have a solution for you. While I'll demonstrate how to invert colors in this example, the same concept can be applied to create a blur effect as well.

To start, create a Div element in your HTML and position it anywhere within your code. Make sure to set its position to absolute and ensure it covers the entire width and height of the browser. Assign a z-index of 1000 to ensure it remains on top, and then apply an inverted transparency mode with a white background color.

// Insert this code snippet in your HTML file
<div class="invert"></div>

// Apply this CSS code
.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 */
}

Answer 4

If you're looking for a quick and easy method to achieve this effect, especially if you're just experimenting with code, I have a solution for you. While I'll demonstrate how to invert colors in this example, the same concept can be applied to create a blur effect as well.

To start, create a Div element in your HTML and position it anywhere within your code. Make sure to set its position to absolute and ensure it covers the entire width and height of the browser. Assign a z-index of 1000 to ensure it remains on top, and then apply an inverted transparency mode with a white background color.

// Insert this code snippet in your HTML file
<div class="invert"></div>

// Apply this CSS code
.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 */
}

Apply a CSS filter to blur and invert the colors of the entire webpage

Answer №1

`Check out the demo on CodePen`

Answer №2

Similar questions

Tips for adjusting your Navbar from transparent to solid based on screen size changes instead of scrolling

Resource loading error: The server returned a 404 (Not Found) status code, as shown in the console

Step-by-step guide on completing and submitting a form through a Windows application

When attempting to transfer data from an Ajax HTML form to a Flask template in Python upon clicking a button, encountered difficulties

The best approach to incorporating interactive animation in next.js

Using a background image in the navigation menu with CSS

The ElementNotInteractableException error occurred because the element cannot be interacted with as it is currently not visible, therefore it cannot be manipulated using robot framework

Load subtitles into your video in real-time

CSS/JS Label Positioner using Mootools, perhaps?

The UI gets all wonky when using ThemeRoller for jQuery

Tips for shifting the cursor slightly to the right within an Input field

Why Changing the Width of a Flexbox Container Doesn't Impact Its Children?

The behavior of Django Admin is rather peculiar

Adjustable ember count within Intercom HTML using Selenium and Python

Arranging columns in a row with some breathing room using Bootstrap's grid system

"What is the purpose of using the `position: absolute` property for movement transitions while deleting an item from a list

Customizing arrays in DataTables allows for creating new columns and displaying them in the table according to the specified customizations

Switch between light and dark mode on a webpage using HTML

Design a Unique CSS Shape

Is manually coding HTML for email necessary, or are there any practical tools or converters available?