# 如何实现类似 iOS 的半透明模糊标题栏

**URL:** <https://meta.discourse.org/t/how-to-have-an-ios-like-tranlucent-blurry-header/97108>\
**Category:** UX\
**Created:** [2018年九月13日 10:46 UTC](https://meta.discourse.org/t/how-to-have-an-ios-like-tranlucent-blurry-header/97108 "2018-09-13T10:46:06Z")\
**Posts on this page:** 1\
**Showing post:** 5

<div class="post-metadata">

**Author:** ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)\
**Post date:** [2018年九月13日 20:07 UTC](https://meta.discourse.org/t/how-to-have-an-ios-like-tranlucent-blurry-header/97108/5 "2018-09-13T20:07:38Z")

</div>

Love this idea, thanks @rootsh3ll, @Johani

> [@rootsh3ll](#):
>
> Gaussian blur

There is apparently a CSS filter for this:

> **[backdrop-filter CSS property - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/backdrop-filter)**
>
> The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect the element or its background needs to be...

as in:

```plaintext
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);

```

But looks like support is patchy! Browser support (surprisingly Chrome doesn’t support it ootb)?:

> **[Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/#feat=css-backdrop-filter)**
>
> "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

This works in Safari (!). Thanks to @Johani for pointing out the naughty space in my original code snippet 🙂

---

_[View the full topic](https://meta.discourse.org/t/how-to-have-an-ios-like-tranlucent-blurry-header/97108)._