11 ms·
Frosted glass from games to the web
- webstrand 2y agoI 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 https://codepen.io/webstrand/pen/OPLLBZN>
- kartofelek007 2y agohttps://codepen.io/kartofelek007/pen/MWxxqVb https://codepen.io/kartofelek007/pen/MWxxqVb with svg filters you will get a better effect
- tyleo 2y agoThis isn’t working for me on iOS. I’m not sure the effect is cross platform. That’s one of the challenges with these techniques.
- ninju 2y agoSmall typo In the *Dynamic Light* section the first time `background-attachment` is spelled it has too many 'e's
- tyleo 2y agoAuthor here! Happy to answer any questions.
- emseetech 2y agoVery 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.
- tyleo 2y agoThanks 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.
- emseetech 2y agoI 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.
- tyleo 2y agoInteresting, 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.
- emseetech 2y agoYeah 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.
- yett 2y agoSafari is only available on macOS
- Terretta 2y agoYou must mean something by this. What do you mean? // Written from a browser Apple calls Safari on iOS.
- yett 2y agoI assumed that by them saying "installing desktop Safari" they are using an OS other than macOS since Safari comes preinstalled on macOS and can't even be uninstalled at least not without disabling System Integrity Protection.
- dudus 2y agoVery nice effect. I love these more creative realistic elements. This one reminds me of this cool card effect https://poke-holo.simey.me/ https://poke-holo.simey.me/
- tyleo 2y agoFunny enough I also implemented the 3D cards in Forza Motorsport 7 :p
- emmanueloga_ 2y agoClicking around found this breakdown [1]. Expertly crafted but also really cool like the optical illusion background does a lot of the heavy lifting! --- 1: https://www.joshdance.com/100/day50/ https://www.joshdance.com/100/day50/
- gloosx 2y agoDo 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.
- tyleo 2y agoTbh I agree the final light steps can give it more of an arcade style and feel less realistic. I think if I used this effect widely I’d make a more professional light rays image with a different opacity. I’m not entirely sure I’d use the subsurface effects or not. If I did I may reduce their intensity. One challenge with a demo like this is that subtle effects may look better, but they are harder to see. So I balanced making them visible enough to appreciate which is more intense than I’d otherwise want.
- mkbosmans 2y agoI 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.
- tyleo 2y agoOther folks made similar comments. I’ll have to see if this is possible. Your recommendation at the bottom sounds plausible so I’ll give it a go.
- tyleo 2y agoThis was discussed elsewhere in the comments: > This can be solved with CSS. Extend the background blur all the way through the element and then use CSS masks to cut out the actual shape you want. > With this, you can remove the border (or inset box shadow), and the edge of the glass will look much, much more real I tried this and it works! One unfortunate impact is a loss in simplicity. In the example on the page you can apply the non-JavaScript version to pretty much any element and get a nice glass effect with `border-radius` and such still functioning as expected. Using `clip-path` I'm able to consider background pixels more correctly but it looks like I'd need an extra div and/or some sizing tricks to get everything working exactly as expected. I'll keep noodling on this and may add an update to the page if a simple solution comes to mind.
- RugnirViking 2y agoeven if you can't figure out a simple solution I'd love to read a part 2 or an addendum with some of these other tricks.
- hipadev23 2y agoHow does the dragging itself work? custom js?
- tyleo 2y agoIn the Cross-Platform Dynamic Light section I describe `data-*` attributes (https://www.tyleo.com/html-glass.html#cross-platform-dynamic-light https://www.tyleo.com/html-glass.html#cross-platform-dynamic...). The dragging works with another bit of JavaScript--the only other bit on the page--which uses a `data-click-drag-area` to define an element which will contain draggable children and a `data-click-drag-item` attribute to indicate a child can be dragged. The the parent must be a 'positioned element' (it must have `position` set to something in CSS) the children must have `position: absolute`. I did this in TypeScript. I'll share the code below. You have to call `initDataClickDrag` from another script... if you want to include this script directly you can just remove the `export` keyword and call `initDataClickDrag()` at the bottom after it is defined: export const initDataClickDrag = () => { // Get all of the areas we can drag items in const dragAreas = document.querySelectorAll("[data-click-drag-area]"); for (const dragArea of dragAreas) { // Only iterate `HTMLElement`s if (!(dragArea instanceof HTMLElement)) continue; // Get all of the items we can drag const dragItems = dragArea.querySelectorAll("[data-click-drag-item]"); for (const dragItem of dragItems) { // Only iterate `HTMLElement`s if (!(dragItem instanceof HTMLElement)) continue; let isDragging = false; let lastCursorX: number | undefined = undefined; let lastCursorY: number | undefined = undefined; // Mouse down event to start dragging const downCallback = (obj: { readonly pageX: number; readonly pageY: number; }) => { isDragging = true; lastCursorX = obj.pageX; lastCursorY = obj.pageY; }; dragItem.addEventListener("mousedown", (e) => { downCallback(e); }); dragItem.addEventListener("touchstart", (e) => { const touches = e.touches; if (touches.length === 0) return; downCallback(touches[0]); }); // Mouse move event to scroll while dragging const moveCallback = (obj: { readonly pageX: number; readonly pageY: number; }): boolean => { if (!isDragging) return false; if (lastCursorX === undefined) return false; if (lastCursorY === undefined) return false; const x = lastCursorX - obj.pageX; const y = lastCursorY - obj.pageY; const left = dragItem.offsetLeft - x; const top = dragItem.offsetTop - y; dragItem.style.left = `${left.toString()}px`; dragItem.style.top = `${top.toString()}px`; // Get dragArea dimensions const dragAreaRect = dragArea.getBoundingClientRect(); // Get element dimensions const elementRect = dragItem.getBoundingClientRect(); if (dragItem.offsetLeft < 0) dragItem.style.left = "0px"; if (dragItem.offsetTop < 0) dragItem.style.top = "0px"; if (left + elementRect.width > dragAreaRect.width) { // Right boundary const left = dragAreaRect.width - elementRect.width; dragItem.style.left = `${left.toString()}px`; } if (top + elementRect.height > dragAreaRect.height) { // Bottom boundary const top = dragAreaRect.height - elementRect.height; dragItem.style.top = `${top.toString()}px`; } lastCursorX = obj.pageX; lastCursorY = obj.pageY; return true; }; document.addEventListener("mousemove", (e) => { moveCallback(e); }); document.addEventListener( "touchmove", (e) => { const touches = e.touches; if (touches.length === 0) return; if (!moveCallback(touches[0])) return; e.preventDefault(); }, { passive: false }, ); // Mouse up event to stop dragging document.addEventListener("mouseup", () => { isDragging = false; }); document.addEventListener("touchend", () => { isDragging = false; }); } } };
- lovegrenoble 2y agoNice effect, nice article too
- scq 2y agoMany game UIs are built using HTML/CSS under the hood, so it has come full circle! https://coherent-labs.com/products/coherent-gameface/ https://coherent-labs.com/products/coherent-gameface/
- tyleo 2y agoI 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.
- OptionOfT 2y agoLots of games used to use [Scaleform](https://en.m.wikipedia.org/wiki/Scaleform_GFx https://en.m.wikipedia.org/wiki/Scaleform_GFx) for their UI.
- tyleo 2y agoLots of games still use it but its been discontinued by Autodesk and is on its way out. Not to mention Flash also being discontinued.
- CreepGin 2y ago[OneJS](https://onejs.com/ 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 https://github.com/Singtaa/Spark2D).
- grishka 2y agoI 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 https://mastodon.social/@grishka/110524476584503201
- tyleo 2y agoVery 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.
- cosmotic 2y agoCool 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.
- JKCalhoun 2y agoAgree. 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.
- cosmotic 2y agoIt may be entirely done within the GPU, making the energy cost insignificant. At least apple added an accessibility setting to reduce the blur.
- tyleo 2y agoYeah, 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.
- cosmotic 2y agoIt 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.
- yetanotherjosh 2y ago"Looking cool" IS a component of UX. UX includes the user's emotional experience of using the product. It is 100% acceptable to do something for UX that is otherwise bad "UI". While you talk about UX here, you really mean UI, because the UX is arguably improved at least for some audiences, who are more positively affected by the dimensionality and light-conscious design the effect brings than negatively affected by the readability downside. In the bigger picture, people use products to perform a function that often includes how they feel in and about themselves while using it. People buy cars to tell a story about who they are. People buy coffee and sit at a cafe in order to get a moment of peace or some internet access. People wear shoes that are a little less comfortable in order to get compliments on them. This is not bad UX. This is literally the meaning of good UX - paying attention to what people actually want versus the minutia of objective functionality.
- Ecco 2y agoI'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.
- smaddox 2y agoIf both sides are frosted, then you will have a similar effect as subsurface scattering.
- Ecco 2y agoYes, 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-rays.webp https://blendamator.com/wp-content/uploads/2023/09/schema-ra...
- tyleo 2y agoTbh 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.
- Ecco 2y agoI 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.
- gyan 2y agoNot quite frosted, but I went for a glass pane effect on the sidebar at https://www.gyan.dev/ffmpeg/builds/ https://www.gyan.dev/ffmpeg/builds/
- rnewme 2y agoYour site is very relaxing and pretty on pc.
- amarcheschi 2y agoFor real, I'm not a fan of flashy colors in websites and that palette looks very calming
- voidfunc 2y agoI 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.
- ilaksh 2y agoI 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.
- jp1016 2y agoi have created a library for generating frosted glass effect, this looks so good on icons. https://github.com/JP1016/react-icon-blur https://github.com/JP1016/react-icon-blur
- mrkpdl 2y agoThis 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!
- bowsamic 2y agoIronically previous versions of macOS also used brushed metal heavily
- pavlov 2y agoThat's the reference. Brushed metal was a controversial design feature of early Mac OS X, unevenly applied across the built-in applications. (It was kind of supposed to be for media browsers, but then the Finder and Calendar and many others were also brushed metal for some reason.) It debuted already in 1999 in QuickTime Player, years before Mac OS X: http://hallofshame.gp.co.at/qtime.htm http://hallofshame.gp.co.at/qtime.htm The rumor was that Steve Jobs liked this style a lot, so it spread to the operating system despite the widespread external criticism (like the link above).
- imiric 2y agoWhy isn't it "ideal"? Visual design is mostly about personal preferences about what looks good, rather than serving any practical purpose. Yes, design also impacts functionality, but it mostly exists to make the user experience more pleasant. If you ask me, skeuomorphism makes interfaces more pleasing to use than the minimalistic trend of the past decade+, where everything must be flat. It adds a visual flourish that replicates surfaces and materials we're used to from the real world, making interfaces more familiar and approachable. From a practical standpoint, flat design makes it hard to distinguish elements and their state, whereas when we had 3D buttons, brushed metal and frosted glass, this was very clear. I think the pendulum is swinging back now, as more designers are shunning the flat look, so hopefully we'll see a resurgence of more human-friendly UIs.
- Animats 2y agoAw. Kind of like Windows 7 Aero theme.
- Karliss 2y agoInteractive 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.
- Lorin 2y agoAgreed, on mobile I can hardly tell the difference after the second step, if at all.
- thiht 2y agoSame for me, I don’t see a single difference between the examples. I’ll try again later on my laptop and see if it changes anything. The first example looks beautiful to me though, I might use it in my next UI.
- riggsdk 2y agoI did a CSS experiment back in 2008 (before CSS allowed for backdrop-blur) that did the same'ish effect: https://webdev.andersriggelsen.dk/aero/ 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 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.
- Lorin 2y agoI 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.
- djmips 2y agoThe floating window doesn't update for me past the initial position. Windows 10 19045.5131. Chrome is up to date Version 131.0.6778.86 (Official Build) (64-bit)
- riggsdk 2y agoThat is quite strange Chrome behavior. Seems to only update it's background position when the window size changes. Looks like a Chrome bug to me! Probably some optimization effort that went wrong. I'm quite sure that it worked back in the days in Chrome. This works as expected in Firefox.
- mkbosmans 2y agoDo browsers really use a box filter to approximate a gaussian blur? That seems implausible to me, as they produce pretty different looking blurs.
- djmips 2y agoIt doesn't seem improbable considering it's a huge performance win and perhaps many won't notice?
- mkbosmans 2y agoIt is the performance win for similar looking results that I find improbable. For a box blur to look like gaussian blur, you would need multiple passes. Even though each pass is now O(1) instead of O(n) (with n the blur radius), due to caching effects I think a gaussian kernel would still be faster, especially for the small blur radius as described in the article.
- tyleo 2y agoThe multi-pass box blur effect is the one I've seen in game engines.
- tyleo 2y agoYeah because the GPU has special hardware which you can take advantage of for an optimized box filter. https://www.rastergrid.com/blog/2010/09/efficient-gaussian-blur-with-linear-sampling/ https://www.rastergrid.com/blog/2010/09/efficient-gaussian-b...
- mkbosmans 2y agoThat link is not a box filter, as it still uses weights to approximate a gaussian convolution kernel. It just uses some special hardware to do less texture fetches. But that is a constant 2x improvement over the full 1D convolution, not the box filter O(1) approach that the article suggests that browsers are using.
- Eduard 2y agophysically 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
- cubefox 2y agoYeah. I think Windows Vista didn't have that problem. I assume this can't be solved with CSS.
- Andrew6rant 2y agoThis can be solved with CSS. Extend the background blur all the way through the element and then use CSS masks to cut out the actual shape you want. With this, you can remove the border (or inset box shadow), and the edge of the glass will look much, much more real
- tyleo 2y agoI tried this and it works! One unfortunate impact is a loss in simplicity. In the example on the page you can apply the non-JavaScript version to pretty much any element and get a nice glass effect with `border-radius` and such still functioning as expected. Using `clip-path` I'm able to consider background pixels more correctly but it looks like I'd need an extra div and/or some sizing tricks to get everything working exactly as expected. I'll keep noodling on this and may add an update to the page if a simple solution comes to mind.
- genezeta 2y agoJust 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.
- tyleo 2y agoVery interesting. I tested primarily on Firefox Windows and iOS and I don’t see similar complaints by others so I suspect it is working widely… I wonder if you have an extension which could be disabling the JavaScript? It is especially weird that “background-attachment: fixed” wouldn’t work on desktop though since that is old old technology. Are you sure you are seeing the light ray texture at all? If you aren’t sure, you could try boosting your screen brightness. It’s a very subtle effect. Otherwise, it would be useful to know if your console shows any error messages on the page.
- genezeta 2y agoAh, sorry to bother you. Ignore my previous comment. It now seems to be working as expected. shrug
- michelreij 2y agoBeautiful. And excellent writing!
- schobi 2y agoI 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
- __m 2y agoIt depends, it’s seen as an expensive operation when you have to fit it into the rendering budget of a game, for a website it’s probably nothing.
- RicoElectrico 2y agoAs per the central limit theorem one can approximate Gaussian with a repeated convolution with any function, box blur being most obvious candidate here. And box blur can be computed quickly with a summed area table.
- jcelerier 2y ago> a repeated convolution I really wonder what's the field of reference of "quickly" there. To me convolution is one of the last resort techniques in signal processing given how expensive it is (O(size of input data * size of convolution kernel)). It's of course still much faster than gaussian blur which is still non-trivial to manage at a barely decent 120fps even on huge Nvidia GPUs but still.
- pitched 2y agoHow are we supposed to think about SIMD in Big-O? Because this is still linear time if the kernel width is less than the max SIMD width (which is 16 I think on x64?)
- promiseofbeans 2y ago
- timvisee 2y agoI 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.
- deskr 2y agoNice. 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.
- vundercind 2y agoI stopped being able to tell what was different after like the second one. All the rest looked the same to me. Might change with side-by-side.
- tyleo 2y agoThis is good feedback. I considered putting each example side-by-side with the previous but it was too noisy. I’ll think about it more this morning and see if I can come up with a UX for this that doesn’t interrupt the flow of the article as harshly.
- riffraff 2y agoperhaps just keep two glass tiles in each example, the old and new one. But I'd be happy with a single one with all at the end :)
- alexkearns 2y agoI used a similar technique to create glass-like panels with my online timeline maker (https://www.chronoflotimeline.com https://www.chronoflotimeline.com). You can see an example timeline with glass-like panels here: https://www.chronoflotimeline.com/timeline/shared/3118/Home-Page-Timeline/ https://www.chronoflotimeline.com/timeline/shared/3118/Home-...
- pknerd 2y agoMan this is cool... Is your lib opensource?
- flavaz 2y agoGreat inspiration, thanks. Been working on something that has gamified elements, and the pin has dropped that this style might be perfect
- bawolff 2y agoKind 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 https://meyerweb.com/eric/css/edge/complexspiral/glassy.html
- chamomeal 2y agoLooks 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.
- butterNaN 2y agoI 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 https://github.com/tsujan/Kvantum
- tln 2y agoThis 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
- Angostura 2y agoDid you miss the bit where the author explains that he is going for the most demanding aesthetics?
- tyleo 2y agoFor folks who wanted a less intensive glass effect, they could pick and choose from the tutorial. You get a pretty respectable piece of glass at step three with just blur and shadow. I'd personally recommend doing that and mixing in a static light ray image. IDT most applications would need the full JavaScript effect. It's fun but it can be distracting. With blur, shadow, and light rays alone you can already get _really close_ to that Forza image at the top.
- tln 2y agoThanks for the article!
- LeftHandPath 2y agoInteresting that most of the top comments are talking about wastefulness. I think that's part of why everyone went to flat design - Windows Vista and glass effects looked great, but they were expensive to compute! Flat designs are aesthetically controversial, and can be more difficult to use than skeuomorphic ones, especially for older users [0][1]. Considering that realism can aid in usability, I think it's totally valid to use effects like this on the web. [0]: https://www.tandfonline.com/doi/abs/10.1080/0144929X.2020.1814867 https://www.tandfonline.com/doi/abs/10.1080/0144929X.2020.18... [1]: https://www.sciencedirect.com/science/article/abs/pii/S014193822400177X https://www.sciencedirect.com/science/article/abs/pii/S01419...
- hirvi74 2y agoWhat is the reason for the limit of stacked effects being n <= 3? Is it an accessibility issue, performance issue, maintenance issues, or what? CSS is by far my weakest skill in terms of development, so I am completely unaware of the best/worst practices.
- gbolcer 2y agoThis 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-glass/ https://www.nathanallan.com/product/bottle-base-textured-gla...
- tyleo 2y agoThat's really interesting. I wonder if you could achieve it by a combination of the glassmorphism effects on my page with some neuromorphism effects: https://www.justinmind.com/ui-design/neumorphism https://www.justinmind.com/ui-design/neumorphism With a quick google search, it looks like you can find some which mimic the 'coke bottle bottom' shape with shadow and light.
- binarymax 2y agoThis 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!
- tyleo 2y agoThanks, I tried to minimize the amount of code to the bare necessities. It actually pained me that JavaScript was required to get a cross-platform version working. Aside from that I haven’t jammed ads or trackers into every nook and cranny of my site which helps a lot with perf.
- Eric_WVGG 2y agoI 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.
- leptons 2y agoToo bad you're still forced to use Safari on iOS (in the US) even if you install Chrome or Firefox.
- Eric_WVGG 2y agoI wouldn't trust Chrome to treat my iPhone battery well, unfortunately. Looking forward to hearing reviews of real Firefox on iOS from Eurozone, though… I'd consider downloading the source and compiling with a dev cert if it turns out to be any good.
- leptons 2y agoI wouldn't worry about a couple % of battery life through the course of the day. For me, it wouldn't be worth using a hobbled web browser.
- vundercind 2y agoI use pinch-zoom all the time I the time, even on mobile-targeted pages. I’d be irritated with Apple if they let web developers disable that basic feature of my browser.
- hirvi74 2y agoQuite 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.
- pclmulqdq 2y agoWhen I was working out how web dev works, I learned the hard way that adding a div is often a good idea, and when you see most modern websites they are a huge pile of divs. If you want a centered div, add another div that is just the full size of the space to center inside, then centering within that div is relatively easy. The same sort of goes with many visual tricks, although this one is very clean, which makes it all the more impressive.
- heisenbit 2y agoThere is no problem in CS that can't be solved by another level of indirection.
- tyleo 2y agoI appreciate you noticed the cleanness. It was a challenge to get it down to 2 divs and 2 classes. I’m disappointed that `background-attachment: fixed` isn’t supported on mobile after all these years. If it were, the full effect could easily be applied to any element with a single CSS class. If I were to make serious use of this on a site, I’d probably opt for the non-JavaScript one class version anyways and optimize for simplicity.
- pclmulqdq 2y agoFor what it's worth, I have a site that I wrote in HTTP/CSS where I make use of blur in the top bar, and I will be switching over to this effect soon using your blog post as a guide. Thank you.
- kfarr 2y agoI 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.
- sam0x17 2y agoThe 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
- KodingKitty 2y agoIf 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 https://www.kodingkitty.com/blog/kitty-os/#the-widget
- nedt 2y agoOver 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 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.
- tyleo 2y agoAn interesting tradeoff here is that this is less CPU processing but more content to download. The effect is achieved by imposing a blurred image on top of a non-blurred one. Here is the blurred image used in that demo: https://meyerweb.com/eric/css/edge/complexspiral/glassy-ripple.jpg https://meyerweb.com/eric/css/edge/complexspiral/glassy-ripp... In many cases this can be the right tradeoff to make. There is also a beauty to its simplicity.
- nedt 2y agoBack then it was just small enough for my ISDN modem. And there are even more images for the headers. But it's also nicely falling back to plain colored backgrounds so the issue of loading the images is not so big. Now I haven't fully checked the frosted glass demo, but shouldn't that even just have impact on the GPU? filter can be accelerated.
- tyleo 2y agoYeah, the filters can be accelerated in most browsers but I believe that is still more battery cost than not having it.
- geon 2y agoI like adding a noise texture [1] to give a grainer result [2]. [1] https://raw.githubusercontent.com/geon/estimator/refs/heads/master/client/css/noise-3percent.png https://raw.githubusercontent.com/geon/estimator/refs/heads/... [2] https://camo.githubusercontent.com/57cf0972c6f6d48c19d969f23bb197ef76d2614caf9754594ba973cc9fd95d4e/687474703a2f2f67656f6e2e6769746875622e696f2f657374696d61746f722f6769746875622d726561646d652d696d616765732f656469742d6469616c6f672e6a7067 https://camo.githubusercontent.com/57cf0972c6f6d48c19d969f23...
- tyleo 2y agoOh this is a great idea!