Home > Web Front-end > CSS Tutorial > How to Achieve a CSS Glass Blur Effect on an Overlay?

How to Achieve a CSS Glass Blur Effect on an Overlay?

Barbara Streisand
Release: 2024-11-24 21:37:21
Original
889 people have browsed it

How to Achieve a CSS Glass Blur Effect on an Overlay?

Applying CSS Glass/Blur Effect to an Overlay

Q: Implementing a blur effect on a semi-transparent overlay

A web developer is facing difficulties in applying a blur effect to an overlay div, making the content behind the div appear blurred.

Previous Attempt:

The developer attempted to implement the effect using the following CSS:

#overlay {
    filter:blur(4px);
    -o-filter:blur(4px);
    -ms-filter:blur(4px);
    -moz-filter:blur(4px);
    -webkit-filter:blur(4px);
}
Copy after login

However, this approach was unsuccessful.

Revised Solution:

For a simpler and more modern solution, the developer can utilize the backdrop-filter property:

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

Browser Support:

Note that browser support for backdrop-filter is not comprehensive. However, for many use cases, a blur effect is not critical.

The above is the detailed content of How to Achieve a CSS Glass Blur Effect on an Overlay?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template