How Can I Create a Blurred Semi-Transparent Overlay Using CSS?

Applying a CSS Glass/Blur Effect to an Overlay

Issue:

Creating a semi-transparent overlay div with a blurred background to blur the elements behind it. However, current CSS code (with filter effects) fails to produce the desired result.

CSS:

#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);
}

Solution:

To achieve the desired effect, consider using the backdrop-filter CSS property instead. This method is more straightforward and provides better cross-browser support:

#overlay {
    backdrop-filter: blur(6px);
}

Note: Browser support for backdrop-filter is not universal, but it should work in most modern browsers. In cases where blurring is non-essential, this alternative can provide a reliable solution.

The above is the detailed content of How Can I Create a Blurred Semi-Transparent Overlay Using CSS?. For more information, please follow other related articles on the PHP Chinese website!