from Hacker News

Next-level frosted glass with backdrop-filter

by timdorr on 12/3/24, 3:43 AM with 65 comments

• by andai on 12/7/24, 12:53 AM

  This always bugged me! The whole point of frosted glass is to be smooth and relaxing, but the lack of surrounding pixel data causes the blurred image to make unnatural jumps in brightness and color when just a single row of pixels scrolls into view.

  It makes me very happy that someone not only noticed this, but did something about it, and then shared it freely!

• by chrismorgan on 12/7/24, 4:19 AM

  I don’t like the `height: 200%`: you might as well be specific about how much extra you need, because an extra 100% might be a lot more than you need, or not enough.

  First question: how much more do you need? Per https://drafts.fxtf.org/filter-effects/#funcdef-filter-blur (via MDN blur() docs → link to spec):

  > Note: A true Gaussian blur has theoretically infinite extent, but in practice all implementations use a finite-area approximation of a Gaussian blur. At the time of writing (January 2024) all major implementations use the familiar three-pass box blur approximation, which has extent: ((3 * sqrt(2 * π) / 4) * σ).

  ¾√2π is about 1.88; it’s generally most convenient to just double the radius instead.

  So, if you’re going for a 16px blur, add 32px. (The formula would make it 30.079px; so I’d accept 30px and 31px also.)

  In the first main demo with code: ditch the `height: 200%`, change the inset to `0 0 -32px 0`, and change the 50% in the mask-image linear-gradient to calc(100% - 32px). (Aside: you can also shorten the gradient definition: linear-gradient(to bottom, black calc(100% - 32px), transparent 0%).) Applying it to later things is left as an exercise to the reader.

  The SVG <filter> element is interesting in this rendering size question: it lets you control the rendering area for the filter, via its x, y, width and height attributes. Their defaults are -10%, -10%, 120% and 120%, meaning 10% overdraw on each edge. Unfortunately you can’t really do height="calc(100% + 32px)" which is what you’d want for the equivalent here. Yes, you could definitely do this whole thing in SVG, using the BackgroundImage source—in fact, you can do better, because you can composite that with SourceAlpha, rather than the dodgy mask-image technique you’re limited to in HTML/CSS. Unfortunately I don’t believe any current browsers support BackgroundImage, though I think IE and Opera used to, and Inkscape does.

• by KaoruAoiShiho on 12/7/24, 2:02 AM

  How does this compare with this that was posted on HN a few weeks ago?

  https://www.tyleo.com/html-glass.html

• by spiffyk on 12/7/24, 3:17 PM

  These effects are all pretty, but like... there should be some sort of media query for devices that are not that powerful (or their owners simply do not wish to burn through their batteries just to read a website). It gets pretty annoying that my phone slows down to a crawl when someone has these effects on their website. At the same time, simply opting out of the blurring and leaving everything else as-is is not a solution, since that may quickly render a lot of things unreadable.

• by webstrand on 12/7/24, 1:34 AM

  You can do it with negative margins too, https://codepen.io/webstrand/pen/OPLLBZN

• by sureIy on 12/7/24, 9:13 AM

  This is the sort of completely unnecessary details that eat hours of your time and add tons of code and maintenance for something that few-to-none notice.

  It's great to experiment, but don't use this in projects that you intend to maintain.

  Signed, someone who used to do this a lot.

• by bldng on 12/7/24, 7:17 PM

  The recent posts around frosted glass reminded me of an exploration I did a while ago, using perspective and svg filters (feTurbulence and feDisplacementMap) to simulate an actual rough surface.

  https://sg5omz.csb.app/

  Chrome & Safari render it differently but interesting, Firefox is skipping it completely … I‘d need to look into it. Anyway, just wanted to share it :)

• by IAmGraydon on 12/7/24, 3:11 AM

  The technique is interesting, but every time I see this effect, I can't help but feel like 2010 is calling and wants its UI design back.

• by seltzered_ on 12/7/24, 4:10 AM

  In case anyone's trying to remember what macos/iOS does with what they call 'vibrancy' - can't find the video directly anymore but they sorta touch on it here (WWDC 2014 , session 220): https://github.com/ASCIIwwdc/wwdc-session-transcripts/blob/b... "The actual implementation and blending that we do could be a Linear Burn, a Color Dodge, PlusD, PlusL."

• by fracus on 12/7/24, 7:08 PM

  This was one of the most effective tutorials I've read on HN. Define everything and hold our hands the entire way. I find I'm often frustrated reading tutorials on HN because they are often littered with ambiguous language, undefined labels, and incorrect assumptions on the reader's prior knowledge.

• by Etheryte on 12/7/24, 6:20 PM

  Last time this article came up, I voiced my opinion that instead of a blog post, this should've probably been a bug report either for the browser or the CSS spec itself. Since this got posted again, I went and looked for one and boy did it not disappoint: there's an ongoing ticket that's now been open for eight years [0]. Granted, that ticket and the related spec cover much more than just this behavior, but the underlying issue is the same. If you look through related tickets on e.g. Chromium, you'll see plenty that are closed as won't fix exactly because of this, the spec itself doesn't account for all the use cases.

  [0] https://github.com/w3c/fxtf-drafts/issues/53

• by strongpigeon on 12/7/24, 1:10 AM

  Very clever and it does result in a nice effect. I do have to say that I am a fan of this glassmorphism trend.

• by vintagedave on 12/7/24, 2:52 PM

  I added this to https://cppbuilder.com/ which used to use a standard blur for the header background. It's very subtle, especially with the bottom border turned off, but I appreciate the knowledge of it being a 'better', ie a more real effect matching how real-world light or glass works. Feels like doing it right.

  Firefox on Mac _may_ have a slight lag scrolling now which Chrome does not show.

  Not mentioned in the article (that I saw) is that despite being a background blur it will affect all elements placed in the header, even with z-index higher than the blur, unless you mark them `position: relative;`. I added that style to my nav container.

• by refulgentis on 12/7/24, 6:35 AM

  This is claptrap: "This effect helps us add depth and realism to our projects." -- when was the last time you, dear reader, saw frosted glass? Let's be real: it's because it was in iOS 7, Apple never moved on from that look and feel, and Apple is Apple. (n.b. a winking opinion, and a mild homage to Apple lore, not a genuine rebuke: https://folklore.org/Round_Rects_Are_Everywhere.html)

• by madeofpalk on 12/7/24, 6:54 PM

  backdrop-filter: blur() is still annoyingly buggy and inconsistent between browsers. I just ran into this this week - Chrome doesn't supported nested/stacked blurred backgrounds, whereas Firefox does. https://codepen.io/joshhunt/full/GgKZKed

  Also ran into odd colour issues in Firefox when combining it also with opacity.

• by jp1016 on 12/7/24, 5:35 PM

  this effect is nextlevel, i use it for almost all my personal projects. i have created a library for generating frosted glass effect.

  https://github.com/JP1016/react-icon-blur

• by zipy124 on 12/7/24, 5:08 PM

  My Samsung s24 ultra chugs at like 10fps or lower when scrolling on this site. Needless to say I won't be taking recommendations from the author, if I can't use their website smoothly on one of the most Powerful phones on the market.

• by eps on 12/7/24, 9:29 AM

  > Application error: a client-side exception has occurred (see the browser console for more information).

  A bit too "next-level" for my iPad it seems.

• by ndesaulniers on 12/7/24, 12:58 AM

  I like the fonts used on this blog!

• by hanifbbz on 12/7/24, 6:51 AM

  The tutorial itself is next level with stunning interactive visual story telling.

• by lbotos on 12/7/24, 12:43 PM

  love this post just for the example of filter: hue-rotate(0deg); That's one I've never seen before!

• by kamens on 12/7/24, 9:04 AM

  Josh your work is amazing

• by tbolt on 12/7/24, 1:19 AM

  Beautiful