How can I make a CSS glass/blur effect work for an overlay?

html css blur css-filters
Chad Johnson picture Chad Johnson · Dec 20, 2014 · Viewed 255.4k times · Source

I am having trouble applying a blur effect on a semi-transparent overlay div. I'd like everything behind the div the be blurred, like this:

SFW image

Here is a jsfiddle which doesn't work: http://jsfiddle.net/u2y2091z/

Any ideas how to make this work? I'd like to keep this as uncomplicated as possible and have it be cross-browser. Here is the CSS I'm using:

#overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    background:black;
    background:rgba(0,0,0,0.8);

    filter:blur(4px);
    -o-filter:blur(4px);
    -ms-filter:blur(4px);
    -moz-filter:blur(4px);
    -webkit-filter:blur(4px);
}

Answer

Jon Catmull picture Jon Catmull · Sep 24, 2019

For a more simple and up to date answer:

backdrop-filter: blur(6px);

Note browser support is not perfect but in most cases a blur would be non essential.

Related questions

Blur effect on a div element

Is it possible to add a gaussian blur on div element? If yes, how I can do this?

Read More
How to blur(css) div without blur child element

.content { float: left; width: 100%; background-image: url('images/zwemmen.png'); height: 501px; -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px); filter: blur(3px); } .opacity { background-color: rgba(5, 98, 127, 0.9); height: 100%; overflow: hidden; } .info { float: left; margin: 100px 0px 0px 30px; …

Read More
using a div to blur an image behind it?

Is it possible to code a div to enable it to blur whatever image is under it? something like this: Could this be done somehow with -webkit maybe?

Read More