How to Recreate iOS 7\'s Blurry Overlay Effect with CSS?

Recreating iOS 7's Blurry Overlay Effect with CSS

iOS 7 introduced a distinct blurred overlay effect that adds depth and visual interest to certain elements. This effect is achieved by combining transparency with a blur filter. While initially exclusive to Apple's platform, it can now be replicated using CSS and, optionally, JavaScript.

The Effect: More Than Transparency

The iOS blur effect goes beyond simple transparency, as it creates a subtle blurring that softens the underlying content. This effect is particularly noticeable in the volume and brightness overlays presented in the iOS Control Center.

CSS Solution

Fortunately, modern CSS supports the filter property, which includes a blur() function to achieve the desired effect. The following code demonstrates how to create the blur effect using CSS:

#myDiv {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    opacity: 0.4;
}

This code applies a 20-pixel blur filter to the specified element and reduces its opacity to 40%. The blur filter is browser-specific, so multiple vendor prefixes are used to ensure cross-browser compatibility.

Live Example

To see the effect in action, check out this JSFiddle demo: [JSFiddle Demo](https://jsfiddle.net/e5m5efrw/embedded/)

The above is the detailed content of How to Recreate iOS 7\'s Blurry Overlay Effect with CSS?. For more information, please follow other related articles on the PHP Chinese website!