Hacker News Reader

Comment by deliriousferret | Hacker News Reader

How do you achieve the blurred background in CSS?

Looks like "backdrop-filter: blur(<length>)" would be the way to achieve the effect shown... but it's not supported by anything yet:

https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-fi...

But if you want to blur a whole element (eg, your main page content while a modal is open) instead of just the part behind another one, that would be "filter: blur(<length>)" - and works in all modern browsers except IE (even my Android Firefox displays the demos on this page correctly):

https://developer.mozilla.org/en/docs/Web/CSS/filter#blur()_...

And IIRC there's some non-standard way to achieve the same effect in IE.

Platform support for backdrop-filter: http://caniuse.com/#search=backdrop-filter

Basically just Safari and only with a prefix.

backdrop-filter is supported by Safari.

...but only with a prefix, and only the most recent versions, and it doesn't have much market share. "Effectively nothing supports it", if you'd rather.

"Doesn't have much market share" really depends I guess on your domain doesn't it? For example, if you're building something that's going to get a fair bit of mobile traffic iOS Safari would represent a fair chunk.

Besides, most applications of backdrop-filter would fit into 'progressive enhancement' and the rest of the browsers that don't support it would just fall back no a non-blurred transparent background which is fine most of the time.

Yup. I noticed Apple has updated the top navbar on the new product pages where it is enabled. It falls back to unblurred-translucent container on other browsers.

Hopefully other browsers will catch up soon.

Chrome has experimental support through a flag. However, the Apple pages are broken with the flag enabled.

I use this on the background element.

  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  filter: blur(3px);

Reply on news.ycombinator.com