Search code examples
csshtmlpngblur

CSS3 / HTML 5 / PNG blur content behind element

I'm trying to blur the content behind a fixed position header so that the content behind it has the user scrolls is blurred when behind this div.

I used to achieve this with simple opacity in CSS but this does not blue the content behind the DIV, merely imposes a translucent panel in front of it.

Is there a simple way even if its a cheat of achieving what I am after. Whether by using a PNG background image or in CSS.

Take a look at the way iOS7 does this http://www.apple.com/ios/ios7/features/.

Solution

  • It's 2015 now, and Apple announced Safari 9, which supports a new CSS feature, the backdrop-filter. Using this CSS rule on your div applies filters to elements behind it only:

    #myDiv {
    backdrop-filter: blur(10px);
}

    example

    This feature is currently only available in Safari anyway (and the -webkit prefix is required for it to work), so I don't recommend using it for now. If you do so, be sure to make use of @supports or/and JS to implement fallback for browsers that don't support it yet:

    @supports (backdrop-filter: blur(10px)) {
    #myDiv { background: #181818; }
}

    Here's the compatibility table at caniuse.com, as well as the Chromium and Firefox feature requests.

    Learn more about what's new in Safari.