Background blur with CSS

Question

I want an Vista/7-aero-glass-style effect on a popup on my site, and it needs to be dynamic. I\'m fine with this not being a cross-browser effect as long as

Answer 1

In recent versions of major browsers you can use backdrop-filter property.

HTML

backdrop blur

CSS

div {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

or if you need different background color for browsers without support:

div {
    background-color: rgba(255, 255, 255, 0.9);
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    div {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0.5);  
    }
}

Demo: JSFiddle

Docs: Mozilla Developer: backdrop-filter

Is it for me?: CanIUse