How to have an iOS like Tranlucent-blurry Header

ux
5

Love this idea, thanks @rootsh3ll, @Johani

There is apparently a CSS filter for this:

as in:

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

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

https://caniuse.com/#feat=css-backdrop-filter

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

5 Likes