Robin Knight Robin Knight - 1 year ago 190
CSS Question

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

Answer Source

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


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

Learn more about what's new in Safari.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download