5 ms·

How do you achieve the blurred background in CSS?

EvilTerran 10y ago
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-filter 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()_2 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.
- madeofpalk 10y ago
  backdrop-filter is supported by Safari.
  - EvilTerran 10y ago
    ...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.
    - prashnts 10y ago
      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.
      - leonatan 10y ago
        Chrome has experimental support through a flag. However, the Apple pages are broken with the flag enabled.
      - deleted 10y ago
        [deleted]
    - madeofpalk 10y ago
      "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.
- pluma 10y ago
  Platform support for backdrop-filter: http://caniuse.com/#search=backdrop-filter http://caniuse.com/#search=backdrop-filter Basically just Safari and only with a prefix.
joshontheweb 10y ago
I use this on the background element. -webkit-filter: blur(3px); -moz-filter: blur(3px); filter: blur(3px);
deleted 10y ago
[deleted]

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-filter 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()_2 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.

madeofpalk 10y ago
backdrop-filter is supported by Safari.
- EvilTerran 10y ago
  ...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.
  - prashnts 10y ago
    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.
    - leonatan 10y ago
      Chrome has experimental support through a flag. However, the Apple pages are broken with the flag enabled.
    - deleted 10y ago
      [deleted]
  - madeofpalk 10y ago
    "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.
pluma 10y ago
Platform support for backdrop-filter: http://caniuse.com/#search=backdrop-filter http://caniuse.com/#search=backdrop-filter Basically just Safari and only with a prefix.

joshontheweb 10y ago

I use this on the background element. -webkit-filter: blur(3px); -moz-filter: blur(3px); filter: blur(3px);

deleted 10y ago

[deleted]