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.
Very cool. The light rays texture can actually do a lot of heavy lifting in the effect. TBH the one I made for the tutorial isn’t even that great. I like the harder lines on that Windows 7 one.
I thought about playing with saturation and I saw some other examples do that. I decided against it. For my article anyways it wouldn’t have mattered as much given that the moon image I used doesn’t have much color. I’d encourage folks making their own glass to play with that though.
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.
Yeah, I don’t use this effect across my site because it’s harder to get a good UX with it.
That being said, it has more of a place in games. Especially in HUD where you don’t want to occlude the background since that’s the main area a user is interacting.
Agree. And when iOS started doing it years ago I was disappointed for that reason — loss of contrast. But also you just know there's a (significant?) battery cost to the effect.
False. The human brain and eye is built to recognize foreground and background and shift focus and attention based off of blur.
Thousands of years of adaptation has honed the brain and the eye to be optimized for this type of view much moreso then the simple UX you see here on HN.
Not only does the blurred/frosted glass background look better but it should be clearer because that's what we've been designed to do.
This holds true in 3D space to a _certain degree_, but here we’re looking at faux 3D projected onto a flat 2D surface where our eyes’ depth perception doesn’t work.
Yes, our brain is good at this - but it still takes some capacity in processing to do this. I guess the point is: if you have a simple, high-contrast background - your brain needs less capacity to process it.
I took it one step further even earlier using a Flash file as a backdrop which was able to achieve the glass effect while still being in a dynamic moveable frame. Can't recall if it used iframes, would need to dig up the code but considering the era it probably did.
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.
I noticed the blur only "sees" the underlying pixels directly below the glass surface. Any pixels outside that box, but within the blur radius do not get used in the gaussian filter. Probably the edge pixels are just repeated. You can see this when the light of the moon pops in to view when the edge of the rectangle starts to touch the moon. It would look more real if the light pixels from the moon start to through even when the box itself is still just over the dark area.
Would this be possible to achieve in CSS? I presume having a larger box with the blur, but clipping it to a smaller box or something like that.
Do you like that subsurface scattering is really visible with a darker background? I can clearly see the circles of varying opacity in a step-like gradient, and I can clearly see the light rays static image. Is it something with my browser or how it renders the thing? I really like how it looked more before the "More subsurface scattering" came in.
Little tip, you might want to add a -webkit-user-select: none on the container elements so it prevents highlighting in Safari when dragging the cursor out and back over.
Thanks for the tip! I had `user-select: none` on the container which had the glass inside of it but apparently that didn't work. I just updated the page with `user-select: none` on the glass itself and it looks like that did the job.
Yeah it's basically fine in Safari because mobile requires a double tap to highlight, but only a single click on desktop. So highlighting is more intentional on mobile than desktop.
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 feel like 90% of what he did was barely noticable. I did the core frosted glass look back in around 2012. I still think it is great and the contrast is fine if you do it right.
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.
Tbh it’s more like an edge-lit acrylic effect. We did call it a “subsurface effect” when I worked at Forza but may have been using the term loosely. Forza also was going for acrylic rather than glass and we had several acrylic samples around the office to play with.
That being said my example is not acrylic… and it’s not quite glass either as you mention. It’s more like glass with some artistic license.
I agree that it looks nice and similar to what SSS eventually renders like. But strictly speaking it's not SSS. Actual SSS happens when the medium is somewhat transparent (light can enter the material) but also diffusive (light gets randomly bounced around within the material). Glass lacks this second property. A good example of a material exhibiting strong SSS would be wax.
Not that this matters much anyway, the effect is cool nonetheless, albeit a little bit improperly named.
I was part of an investigation which considered Coherent products for one of the Forza titles. We didn't go with it at the time, and I haven't had the opportunity to use it on a title at other companies, but it looks rad.
Forza used a custom UI system based on XAML and the acrylic elements at the top of the article were largely implemented in a custom shader. For a custom system it was pretty solid. We also built a lot of tech into it related to 3D placement of elements to support diagetic UI.
[OneJS](https://onejs.com/) for Unity is a more modern entry in this space (Disclaimer: I'm the creator). Instead of embedding a browser/webview, it lets you use web techs and directly integrates with UI Toolkit (Unity's native UI solution).
A general drawback of using web UIs in games is the lack of support for performant 2D vfx. It's something I'd like to tackle in 2025 with [Spark2D](https://github.com/Singtaa/Spark2D).
In my experience there are two kinds of games: UI is the game or UI supports the game. When UI is the game, the performance bottleneck is almost always text rendering. From a DX POV there are many solutions, but from a performance POV, how can anyone compete with Skia or the native text APIs?
I feel that no one can compete with Skia in terms of feature-richness. But performance, it'll really depend on the environment, hardware, and what you are doing.
Unity's UI Toolkit, for example, is mesh and shader-based, so it can be highly performant for complex UIs.
Interesting note: If you use OneJS with the NodeJS backend, you can use the wasm version of Skia and render all kinds of cool stuff onto a texture in Unity. Obviously the performance with that is not ideal for animation. But I was able to quickly and easily render music notations and charts on my deployed Unity app on Android using that method.
> Why not embedding a browser directly though? How do you feel about the Flutter based UI Widgets?
Mostly to avoid overheads on both disk space and runtime performance. QuickJS is only ~20MB to embed. And I have no experience with Flutter, unfortunately. =/
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
Very cool. The light rays texture can actually do a lot of heavy lifting in the effect. TBH the one I made for the tutorial isn’t even that great. I like the harder lines on that Windows 7 one.
I thought about playing with saturation and I saw some other examples do that. I decided against it. For my article anyways it wouldn’t have mattered as much given that the moon image I used doesn’t have much color. I’d encourage folks making their own glass to play with that though.
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!
Ironically previous versions of macOS also used brushed metal heavily
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.
Yeah, I don’t use this effect across my site because it’s harder to get a good UX with it.
That being said, it has more of a place in games. Especially in HUD where you don’t want to occlude the background since that’s the main area a user is interacting.
It has all the same problems in games as it has on a website, it's just more acceptable to sacrifice usability for 'looking cool' in a game.
Agree. And when iOS started doing it years ago I was disappointed for that reason — loss of contrast. But also you just know there's a (significant?) battery cost to the effect.
It may be entirely done within the GPU, making the energy cost insignificant. At least apple added an accessibility setting to reduce the blur.
False. The human brain and eye is built to recognize foreground and background and shift focus and attention based off of blur.
Thousands of years of adaptation has honed the brain and the eye to be optimized for this type of view much moreso then the simple UX you see here on HN.
Not only does the blurred/frosted glass background look better but it should be clearer because that's what we've been designed to do.
This holds true in 3D space to a _certain degree_, but here we’re looking at faux 3D projected onto a flat 2D surface where our eyes’ depth perception doesn’t work.
Yes, our brain is good at this - but it still takes some capacity in processing to do this. I guess the point is: if you have a simple, high-contrast background - your brain needs less capacity to process it.
I don't follow. What exactly has the brain been honed to do?
Every single article I've read on the matter says higher contrast is more readable. The debate is over how high is 'good enough'.
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.
I took it one step further even earlier using a Flash file as a backdrop which was able to achieve the glass effect while still being in a dynamic moveable frame. Can't recall if it used iframes, would need to dig up the code but considering the era it probably did.
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.
Agreed, on mobile I can hardly tell the difference after the second step, if at all.
Do browsers really use a box filter to approximate a gaussian blur? That seems implausible to me, as they produce pretty different looking blurs.
Author here! Happy to answer any questions.
I noticed the blur only "sees" the underlying pixels directly below the glass surface. Any pixels outside that box, but within the blur radius do not get used in the gaussian filter. Probably the edge pixels are just repeated. You can see this when the light of the moon pops in to view when the edge of the rectangle starts to touch the moon. It would look more real if the light pixels from the moon start to through even when the box itself is still just over the dark area.
Would this be possible to achieve in CSS? I presume having a larger box with the blur, but clipping it to a smaller box or something like that.
Very nice effect. I love these more creative realistic elements.
This one reminds me of this cool card effect
https://poke-holo.simey.me/
Funny enough I also implemented the 3D cards in Forza Motorsport 7 :p
Do you like that subsurface scattering is really visible with a darker background? I can clearly see the circles of varying opacity in a step-like gradient, and I can clearly see the light rays static image. Is it something with my browser or how it renders the thing? I really like how it looked more before the "More subsurface scattering" came in.
Very cool stuff!
Little tip, you might want to add a -webkit-user-select: none on the container elements so it prevents highlighting in Safari when dragging the cursor out and back over.
Thanks for the tip! I had `user-select: none` on the container which had the glass inside of it but apparently that didn't work. I just updated the page with `user-select: none` on the glass itself and it looks like that did the job.
I may be mistaken, but I think you have to use the -webkit- prefix for it to work in Safari.
It's working great in Chrome and Firefox though.
Interesting, I'll add the prefix and install desktop Safari in the future.
I was testing on Safari iOS and it looks like the non-prefix version worked there.
Safari is only available on macOS
Yeah it's basically fine in Safari because mobile requires a double tap to highlight, but only a single click on desktop. So highlighting is more intentional on mobile than desktop.
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 feel like 90% of what he did was barely noticable. I did the core frosted glass look back in around 2012. I still think it is great and the contrast is fine if you do it right.
Not quite frosted, but I went for a glass pane effect on the sidebar at https://www.gyan.dev/ffmpeg/builds/
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.
Tbh it’s more like an edge-lit acrylic effect. We did call it a “subsurface effect” when I worked at Forza but may have been using the term loosely. Forza also was going for acrylic rather than glass and we had several acrylic samples around the office to play with.
That being said my example is not acrylic… and it’s not quite glass either as you mention. It’s more like glass with some artistic license.
I agree that it looks nice and similar to what SSS eventually renders like. But strictly speaking it's not SSS. Actual SSS happens when the medium is somewhat transparent (light can enter the material) but also diffusive (light gets randomly bounced around within the material). Glass lacks this second property. A good example of a material exhibiting strong SSS would be wax.
Not that this matters much anyway, the effect is cool nonetheless, albeit a little bit improperly named.
If both sides are frosted, then you will have a similar effect as subsurface scattering.
Yes, it looks similar. But it's still not sub surface scattering.
Light inside the frosted glass just goes in a straight direction. It will not behave like this : https://blendamator.com/wp-content/uploads/2023/09/schema-ra...
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 was part of an investigation which considered Coherent products for one of the Forza titles. We didn't go with it at the time, and I haven't had the opportunity to use it on a title at other companies, but it looks rad.
Forza used a custom UI system based on XAML and the acrylic elements at the top of the article were largely implemented in a custom shader. For a custom system it was pretty solid. We also built a lot of tech into it related to 3D placement of elements to support diagetic UI.
Was this the in-house c++ WPF implementation?
Yes it was! I actually loved that thing.
[OneJS](https://onejs.com/) for Unity is a more modern entry in this space (Disclaimer: I'm the creator). Instead of embedding a browser/webview, it lets you use web techs and directly integrates with UI Toolkit (Unity's native UI solution).
A general drawback of using web UIs in games is the lack of support for performant 2D vfx. It's something I'd like to tackle in 2025 with [Spark2D](https://github.com/Singtaa/Spark2D).
This is intriguing.
Why not embedding a browser directly though?
How do you feel about the Flutter based UI Widgets? (https://github.com/UIWidgets/com.unity.uiwidgets)
In my experience there are two kinds of games: UI is the game or UI supports the game. When UI is the game, the performance bottleneck is almost always text rendering. From a DX POV there are many solutions, but from a performance POV, how can anyone compete with Skia or the native text APIs?
I feel that no one can compete with Skia in terms of feature-richness. But performance, it'll really depend on the environment, hardware, and what you are doing.
Unity's UI Toolkit, for example, is mesh and shader-based, so it can be highly performant for complex UIs.
Interesting note: If you use OneJS with the NodeJS backend, you can use the wasm version of Skia and render all kinds of cool stuff onto a texture in Unity. Obviously the performance with that is not ideal for animation. But I was able to quickly and easily render music notations and charts on my deployed Unity app on Android using that method.
> Why not embedding a browser directly though? How do you feel about the Flutter based UI Widgets?
Mostly to avoid overheads on both disk space and runtime performance. QuickJS is only ~20MB to embed. And I have no experience with Flutter, unfortunately. =/
Lots of games used to use [Scaleform](https://en.m.wikipedia.org/wiki/Scaleform_GFx) for their UI.
Lots of games still use it but its been discontinued by Autodesk and is on its way out. Not to mention Flash also being discontinued.
Nice effect, nice article too
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.