New CSS Property to create that blurry navbar we all love (Safari Only) (codepen.io)

over 3 years ago from William Newton, Product Designer at Gusto

7 comments

Mattias H, over 3 years ago
Hasn't Backdrop Filters been in safari since last year? https://webkit.org/blog/3632/introducing-backdrop-filters/
7 points
- Ed Adams, over 3 years ago (edited over 3 years ago )
  I bet this will never land in the other browsers, or if it does it won't be until the convention is outdated. This is almost exclusively Apple's thing these days, I'm not surprised it's in Safari (both OSX and iOS implement it as a system-level feature) but I would be quite surprised if other browsers implemented it.
  0 points
  - Darrell Hanley, over 3 years ago
    Actually, this has already been implemented into Blink (Chrome), but has to be enabled as a feature flag.
    2 points
    - Matt Hamlin, over 3 years ago
      Yea, works for me in chrome (v51 canary) as
      backdrop-filter: blur(10px);
      1 point
- William Newton, over 3 years ago
  Yes, it has — but I didn't know about it until this week :)
  0 points
Adrian Furtuna, over 3 years ago
Well, until this is implemented properly, I use the opacity property. Used it to blur the header on my website. (furtuna.ro)
1 point
David Darnes, over 3 years ago
Looks really good. I tried to record it using LICEcap but oddly it doesn't actually capture the blur.
1 point

Now playing