I really like the aestectics, even if physically wrong at the edges. Thanks for sharing the details.
As a embedded developer, I feel this is kind of wasteful. Every client computes an "expensive" blur filter, over an over again? Just for blending to a blurred version of the background image?
I know - this is using the GPU, this is optimized. In the end, this should not be much. (is it really?)
<rant> I feel the general trend with current web development is too much bloat. Simple sites take 5 seconds to load? Heavy lifting on the client? </rant>... but not the authors fault
I extracted a similar "light rays" texture from Windows 7 when I was trying to replicate its aero glass effect on Android to see what can be done with the new shader APIs. I ended up with something very close to this article, except I didn't do the inner shadows but I did increase the saturation of the blurred background a bit.
This is great work, the interactive demo is a good way to show it off too. It’s fun to drag the window over the moon.
That said I dislike the use of frosted glass in user interface design, and feel it was a step backwards for Mac OS when it was added. Designers (hypocritically including myself - I use it too sometimes) are so seduced by it. But in practice it’s never ideal. Especially if the content behind the panel is dynamic or user generated.
It’s the brushed metal of the 2010s, I’m surprised that it leaked out of Windows Vista into everything else!
Cool technical achievement; Bad UX. It's harder to read or understand anything inside a translucent panel than one with a consistent, solid background because of lower and inconsistent contrast with the background. Additionally, things potentially happening underneath will be distracting and disorienting.
Interactive examples are nice, but would have been better if there was a side by comparison or toggle for switching to previous iteration. In most of the cases improvement of each iteration is so subtle I couldn't tell a difference.
Quite impressive to be honest. I always enjoy seeing how creative and powerful CSS can be.
Though, I feel like there is some level of understanding of HTML/CSS that I will never be able to grasp -- like this demonstration. This person is out here making frosted windows, and I can't even center a div.
Nice. I struggle though to compare the differences. I would find it easier to have one demo and a dropdown which I can select which example I'm looking at.
physically wrong, as it only incorporates the pixels directly behind the glass. Noticeable with the upper few rows overexaggerating the cropped background pixels.
This results in flickering when vertically scrolling over abrupt BG color borders , eg noticeable on mobile browser Twitter UI
If you are into glass UI, you might enjoy this one inspired by visionOS and done with Tailwind CSS. Click on the "show windows" button in the upper left corner. Works on mobile, but definitely better on larger screens.
https://www.kodingkitty.com/blog/kitty-os/#the-widget
I haven't done HTML or CSS since HTML4 and CSS2 were cutting edge. This kind of stuff blows my mind now. Very cool, too bad frontend is arcanine magic these days because I don't have time to learn all this anymore.
I'm pretty sure there is no subsurface scattering in frosted glass. Indeed frosted glass is just regular glass with a frosted surface. Below the surface, it's just pure glass, which does not scatter light.
The frosted glass effect was a huge eye-opener for me the first I saw it in the early 2000s. At the time I thought PNG-based translucency was the be-all-end-all of GUI design and nothing would ever trump it. I genuinely believed there was no UI effect you could not create by simply adding an alpha channel and allowing for translucency and layers overlaying on top of each other. Drop-shadows, glass effects, all of it can be fully done by PNGs that overlay on top of each other. Then I saw a frosted glass / background effect and I was awestruck, here was a UI effect that wasn't simply overlaying pixels over pixels.... I'll never forget that moment
Over 20 years ago Eric Meyer had a glass background done with CSS1 with a bit more texture but way less code https://meyerweb.com/eric/css/edge/complexspiral/glassy.html
If for nothing else those old things on css/edge could at least be used as inspiration.
I was grappling with background-attachment: fixed in iOS devices just last week… caniuse.net indicated that it’s supported now, but that is very much still not the case.
I think I’ve finally cracked why it’s not supported. The official line is that it’s “too expensive” on the cpu, but that doesn’t hold water when single-core performance of iPhones regularly outpaces Macs.
iOS Safari does one extra “abstraction” phase of an entire web page that allows for instant pinching and zooming of web pages. In order to get background-attachment: fixed working under such a paradigm, you would need to not only calculate where the background image is relative to the viewport, but also the size and placement of a zoomed document in real time. And on top of that, the browser designers would need to make some kind of decision on what a coherent implementation of the feature would even do under such circumstances.
I wish that iOS had a way to just turn off this extra abstraction in CSS altogether. It was a fine crib before responsive design was a thing, but for some pages, it just causes problems now. It’s not needed “everywhere” on the web any more than it’s necessary in all iOS apps.
On a semi-related note, the best in-game UI I’ve ever seen was in Prey 2017. The little computers and terminals you interact with look amazing, and every single I time I used one I was spellbound. The huge amount of effort that goes into small details in games in particular is incredible.
I have this almost everywhere on my KDE Plasma desktop, with the help of Kvantum* (their debian dependencies seem to be broken - I had to build it from source in a container). Maybe it won't last for long, but I absolutely love the aesthetics.
I didn't like how the highlighted edge of the glass didn't change as the pane was moved around, here's a way to fix that: <https://codepen.io/webstrand/pen/OPLLBZN>
I'm not seeing the "background-attachment fixed" working at all. Not the CSS and neither the JavaScript solution. The rays stay static, detached from the moving div just as they were before applying that code.
This is beautiful, and the thing that most surprised me is that it didn't fire up my fan and roast my machine. I'm used to browser visuals like these just grinding away - but this was very smooth and performant. Thanks for sharing!
I personally like this aesthetic and think it looks great. I also don't think the performance questions raised in this thread are material given modern user device capabilities.
However, the contrast between the glass background and foreground is dependent on background content by design, which is a serious issue for complying with various accessibility guidelines. For enterprise apps if you want to pass the various accessibility reviews it needs to be a user preference to disable this at least, or just don't use this technique to guarantee pass for contrast related questions.
I really like the aestectics, even if physically wrong at the edges. Thanks for sharing the details.
As a embedded developer, I feel this is kind of wasteful. Every client computes an "expensive" blur filter, over an over again? Just for blending to a blurred version of the background image?
I know - this is using the GPU, this is optimized. In the end, this should not be much. (is it really?)
<rant> I feel the general trend with current web development is too much bloat. Simple sites take 5 seconds to load? Heavy lifting on the client? </rant>... but not the authors fault
I extracted a similar "light rays" texture from Windows 7 when I was trying to replicate its aero glass effect on Android to see what can be done with the new shader APIs. I ended up with something very close to this article, except I didn't do the inner shadows but I did increase the saturation of the blurred background a bit.
https://mastodon.social/@grishka/110524476584503201
This is great work, the interactive demo is a good way to show it off too. It’s fun to drag the window over the moon.
That said I dislike the use of frosted glass in user interface design, and feel it was a step backwards for Mac OS when it was added. Designers (hypocritically including myself - I use it too sometimes) are so seduced by it. But in practice it’s never ideal. Especially if the content behind the panel is dynamic or user generated.
It’s the brushed metal of the 2010s, I’m surprised that it leaked out of Windows Vista into everything else!
I did a CSS experiment back in 2008 (before CSS allowed for backdrop-blur) that did the same'ish effect: https://webdev.andersriggelsen.dk/aero/
It works by using a fixed-position pre-blurred (with glass effects) background image: https://webdev.andersriggelsen.dk/aero/bgl.jpg
This is a lot more performant than a live gaussian blur but it of course has all the drawbacks of not allowing for a dynamic background image.
Cool technical achievement; Bad UX. It's harder to read or understand anything inside a translucent panel than one with a consistent, solid background because of lower and inconsistent contrast with the background. Additionally, things potentially happening underneath will be distracting and disorienting.
Interactive examples are nice, but would have been better if there was a side by comparison or toggle for switching to previous iteration. In most of the cases improvement of each iteration is so subtle I couldn't tell a difference.
This has like 10 stacked effects, thats about 7 too many except for the most demanding aesthetics.
Just use the background color + blur + box shadow or border
Kind of interesting how we've come full circle. One of the original css demos (for css 1) was for a frosted glass effect https://meyerweb.com/eric/css/edge/complexspiral/glassy.html
Quite impressive to be honest. I always enjoy seeing how creative and powerful CSS can be.
Though, I feel like there is some level of understanding of HTML/CSS that I will never be able to grasp -- like this demonstration. This person is out here making frosted windows, and I can't even center a div.
Not quite frosted, but I went for a glass pane effect on the sidebar at https://www.gyan.dev/ffmpeg/builds/
Author here! Happy to answer any questions.
Nice. I struggle though to compare the differences. I would find it easier to have one demo and a dropdown which I can select which example I'm looking at.
physically wrong, as it only incorporates the pixels directly behind the glass. Noticeable with the upper few rows overexaggerating the cropped background pixels.
This results in flickering when vertically scrolling over abrupt BG color borders , eg noticeable on mobile browser Twitter UI
If you are into glass UI, you might enjoy this one inspired by visionOS and done with Tailwind CSS. Click on the "show windows" button in the upper left corner. Works on mobile, but definitely better on larger screens. https://www.kodingkitty.com/blog/kitty-os/#the-widget
I haven't done HTML or CSS since HTML4 and CSS2 were cutting edge. This kind of stuff blows my mind now. Very cool, too bad frontend is arcanine magic these days because I don't have time to learn all this anymore.
I'm pretty sure there is no subsurface scattering in frosted glass. Indeed frosted glass is just regular glass with a frosted surface. Below the surface, it's just pure glass, which does not scatter light.
I like adding a noise texture [1] to give a grainer result [2].
[1] https://raw.githubusercontent.com/geon/estimator/refs/heads/... [2] https://camo.githubusercontent.com/57cf0972c6f6d48c19d969f23...
The frosted glass effect was a huge eye-opener for me the first I saw it in the early 2000s. At the time I thought PNG-based translucency was the be-all-end-all of GUI design and nothing would ever trump it. I genuinely believed there was no UI effect you could not create by simply adding an alpha channel and allowing for translucency and layers overlaying on top of each other. Drop-shadows, glass effects, all of it can be fully done by PNGs that overlay on top of each other. Then I saw a frosted glass / background effect and I was awestruck, here was a UI effect that wasn't simply overlaying pixels over pixels.... I'll never forget that moment
spoiler: and so, I left frontend :D
Many game UIs are built using HTML/CSS under the hood, so it has come full circle!
https://coherent-labs.com/products/coherent-gameface/
I used a similar technique to create glass-like panels with my online timeline maker (https://www.chronoflotimeline.com). You can see an example timeline with glass-like panels here: https://www.chronoflotimeline.com/timeline/shared/3118/Home-...
Over 20 years ago Eric Meyer had a glass background done with CSS1 with a bit more texture but way less code https://meyerweb.com/eric/css/edge/complexspiral/glassy.html If for nothing else those old things on css/edge could at least be used as inspiration.
I was grappling with background-attachment: fixed in iOS devices just last week… caniuse.net indicated that it’s supported now, but that is very much still not the case.
I think I’ve finally cracked why it’s not supported. The official line is that it’s “too expensive” on the cpu, but that doesn’t hold water when single-core performance of iPhones regularly outpaces Macs.
iOS Safari does one extra “abstraction” phase of an entire web page that allows for instant pinching and zooming of web pages. In order to get background-attachment: fixed working under such a paradigm, you would need to not only calculate where the background image is relative to the viewport, but also the size and placement of a zoomed document in real time. And on top of that, the browser designers would need to make some kind of decision on what a coherent implementation of the feature would even do under such circumstances.
I wish that iOS had a way to just turn off this extra abstraction in CSS altogether. It was a fine crib before responsive design was a thing, but for some pages, it just causes problems now. It’s not needed “everywhere” on the web any more than it’s necessary in all iOS apps.
Do browsers really use a box filter to approximate a gaussian blur? That seems implausible to me, as they produce pretty different looking blurs.
This is really cool and thanks for sharing the details. Now I want to see coke bottle glass effects. :-) https://www.nathanallan.com/product/bottle-base-textured-gla...
Looks awesome!!
On a semi-related note, the best in-game UI I’ve ever seen was in Prey 2017. The little computers and terminals you interact with look amazing, and every single I time I used one I was spellbound. The huge amount of effort that goes into small details in games in particular is incredible.
I always feel rendering such blurred panes takes quite a performance hit. Do we have any numbers on this?
I might just be old - when this was done on the CPU.
Great inspiration, thanks. Been working on something that has gamified elements, and the pin has dropped that this style might be perfect
https://codepen.io/kartofelek007/pen/MWxxqVb with svg filters you will get a better effect
I have this almost everywhere on my KDE Plasma desktop, with the help of Kvantum* (their debian dependencies seem to be broken - I had to build it from source in a container). Maybe it won't last for long, but I absolutely love the aesthetics.
* https://github.com/tsujan/Kvantum
I didn't like how the highlighted edge of the glass didn't change as the pane was moved around, here's a way to fix that: <https://codepen.io/webstrand/pen/OPLLBZN>
Just so you know...
I'm not seeing the "background-attachment fixed" working at all. Not the CSS and neither the JavaScript solution. The rays stay static, detached from the moving div just as they were before applying that code.
In both Firefox and Vivaldi, on Windows.
This is beautiful, and the thing that most surprised me is that it didn't fire up my fan and roast my machine. I'm used to browser visuals like these just grinding away - but this was very smooth and performant. Thanks for sharing!
Nice effect, nice article too
Small typo
In the *Dynamic Light* section the first time `background-attachment` is spelled it has too many 'e's
I personally like this aesthetic and think it looks great. I also don't think the performance questions raised in this thread are material given modern user device capabilities.
However, the contrast between the glass background and foreground is dependent on background content by design, which is a serious issue for complying with various accessibility guidelines. For enterprise apps if you want to pass the various accessibility reviews it needs to be a user preference to disable this at least, or just don't use this technique to guarantee pass for contrast related questions.
Beautiful. And excellent writing!
i have created a library for generating frosted glass effect, this looks so good on icons.
https://github.com/JP1016/react-icon-blur
Aw. Kind of like Windows 7 Aero theme.