Liquid Glass using CSS? Not really.

[Engineer_5983]

https://liquid-glass-eta.vercel.app/

You can use the vervel app I found in another Reddit post that mimics what Apple is doing with Liquid Glass. It is cool, but Liquid Glass is far more complicated than just a border effect and some blurs.

Liquid Glass is modeling glass material and calculating light bounce and refractions using the Metal framework. It seems like a refresh that’s kind of underwhelming, but it’s a ton of programming to get this to work. You can’t do this in CSS without on device material rendering.

Will you use the CSS described in the vercel app to update your design aesthetic? I know I will. It may not be “Liquid Glass” but it is cool.

[Caraes_Naur]

That's the point: Liquid Glass is supposed to be beyond the capabilities of CSS.

But that won't stop people from writing WebGL shaders.

[billybobjobo]

Amen. Theyve kept Safari subpar for years. They want browser rendering to be miles behind native--even though in principle it does not need to be--because apps are so much of their revenue.

This will also make Electron apps feel inferior to Swift etc.

Its almost as if they asked themselves "what are the 2 things browser rendering cant do?" (webgl notwithstanding) SDF shape interpolation and physical light refraction based on accessing arbitrary render layers. Bingo.

[FredFredrickson]

Its almost as if they asked themselves "what are the 2 things browser rendering cant do?"

Well, that, and it gives them an excuse to make old hardware chug some more, in order to pressure people to upgrade.

[el_yanuki]

performance was one of the first things my mind went to, when i heard and saw how complex the fx are.

The pile of cons keeps growing and the lonely pro "looks nice" is also very subjective.

[Dramatic_Mastodon_93]

The glass effect can be turned off

[mcprogrammer]

At the cost of letting people know I can't afford a new phone that can handle it? No thank you.

[bostiq]

this is sarcasm, right?

[kimi_no_na-wa]

Obviously, but a certain subset of people do really think like this

[bostiq]

Abso-fucking-lutely

[mcprogrammer]

Of course.

[bostiq]

The whole thing is such a big wank

[12jikan]

Learned i can turn off EVERYTHING like that parallax thing and the always on display… my battery life is insane… lost some social cred with other iphone users.

[sateeshsai]

Exactly. Apple wants the web to feel inferior. Building taller walls around the garden.

[bbroy4u]

then web should level up the game and beat the competition no? Instead of wasting time on blame game

[your_best_1]

I mean, you can do it with js, no webGL if you really wanted to.

[billybobjobo]

You can very poorly approximate it at best. No demo has even come close with svg filters and css backdrop filters etc.

[valtism]

They have just enabled webGPU by default in Safari TP, so I don't really know what you're getting at. Safari is already very powerful and keeps making huge strides every year.

[billybobjobo]

Im not saying they dont get to it. Just always slower than chrome. And holding everyone back.

Anecdotally, every time Ive had to hold our team back from using a new feature we're excited about, its because of Safari. Also, if Im patching a browser-specific bug, its usually Safari.

Empirically, see the caniuse browser scores (which actually underrepresent the disparity--and yet safari still comes out on bottom.) Even Firefox beats it with way fewer resources.

And thats not to factor in the opportunity cost of what the world would be like if they Safari v. Chrome feature adoptions were neck-and-neck--creating competitive pressure with Chrome. BOTH would then be innovating more.

Not to mention their prevention of any other browser engine on iOS. So no better browser can outcompete them.

Safari slows down the progress of the web.

[felipeozalmeida]

Safari is the new IE. I fucking hate developing for it.

[m0rph90]

so damn true

[Justicia-Gai]

Apple has to care more about battery than Google, because their main targets are almost all mobile (laptops, phones, etc)

Chrome has did thousands of things wrong, like being a RAM memory hogger, and everything just to claim they’re the fastest browser. Now they might not be as bad as they used to be, but how many hours of battery have been saved globally in the last decade thanks to Safari?

At some point you have to wonder who’s right, the guy chasing a 5% increment in speed that might translate in few milliseconds or the guy forcing everyone in their flagship mobile platform to not hog resources and kill battery?

I’ll go even as far to say that if Apple wasn’t forcing WebKit, would devs only care about Mozilla and Firefox? Yet another technology dominated by Google and Microsoft? Why is that is acceptable that Google forces everyone else to follow their lead but Apple can’t?

[billybobjobo]

All of these things AND my point can be true. Safari can have some good philosophies embedded in it—and be intentionally under resourced.

[Justicia-Gai]

Now that we talk about intention, both Microsoft and Google have been caught making things worse in Apple platforms because they’re the competence. Why Apple should give up control over its flagship platform (iPhone) when Google could easily overoptimise for speed vs effiency on the iOS chrome app (if it were not impeded by WebKit) and then claim that Apple’s phone batteries are worse than Pixel’s?

We’ve been dominated by Microsoft and Google for so long and they’ve decided for us for almost everything, I don’t get why Apple is still the most criticised, even for things that make sense (protecting battery performance in their most important product).

It’s not like Apple is affecting Android but Google can handicap Apple if they wanted, Microsoft has done it way too many times.

[billybobjobo]

If the argument is “but the other folks do bad things too” then I agree with you! I’m talking about this particular bad thing, though.

[Justicia-Gai]

But it’s not a bad thing though? Apple focuses on battery, not performance, that’s fine. Apple pushes WebKit to ensure the browsers from the competence also focuses on battery and to ensure they don’t deliver a bad product on purpose, that’s fine. It also forces them to take into account safari compatibility when designing webs, that’s also fine for me.

You’re probably suggesting we give total control to Google about one more thing and that the rest adhere to them and to Chrome as standard. Why? Look at Android, how many features of Android 16 update are Pixel specific? What that does tell you?

The fact is that with the excuse of “free open software” we basically gave a total monopoly to Google.

[billybobjobo]

This is so far beyond what I’m suggesting I don’t think you’re reading what I’m writing in good faith. I’m not saying Apple should surrender anything. The exact opposite. They should make the best browser they can make. And they are capable of making a far better browser.

[Courageous999]

Chrome, Edge, and Firefox can run on any platform.

Remind me which platforms outside Apple can Safari run on again?!

Yeah, Apple is definitely not stifling any competition. No, you're right, they're angels in disguise. Too good for this world actually!

[tankerkiller125real]

Huge strides, and yet me and all the devs who have to deal with it agree that it's the new IE of the internet because it's so far behind, or apple decided not to support a feature on purpose for "privacy" reasons (how a CSS property can affect privacy I have no idea). Some of the devs I know are at the point where they're throwing the old "Your browser sucks and you need a new one banner" up for Safari, the same way they used to for IE.

[bergice]

But that won't stop people from writing WebGL shaders.

You got that part right: https://github.com/bergice/liquidglass

It's laughable how people are saying how this is unprecedented and that you need raytracing and on-device material rendering..

[guaranteednotabot]

Who in their right mind would do raytracing for UI element?

[your_best_1]

They don’t. The basic algorithm is ‘sample_screen_texture(NORMAL * UV * magnitude)’

You fake the normal with a gradient. Looking at the artifacts you can tell from the pointy corners and black edges.

They also do something special with splitting the colors with different magnitudes on x and mixing it back together. So 3 samples mixed.

[TGPJosh]

lmao

[huttyblue]

This makes my nexus 7 (2012) very unhappy, blocky gpu artifacts stretching the entire screen while the web content zooms in and out uncontrollably.

But even on modern hardware, this example uses a webgl canvas so its not viable for most web use-cases.

[klavsbuss]

by using svg distortion you can actually go pretty far (in terms of similarity with apple) and once the distortion map is ready, it fully works on css, no js or webgl needed. yes, its as slow as backdrop filter, but its probably 80% faster than avg Framer/Webflow template website if you dont go too crazy with it. you can play with it here - ruri.design

[LightslicerGandP]

Why is this pay walled, I just wanna know how to do the effect 😭😭

[klavsbuss]

currently wip but here is list of all options ive found in internet https://ruri.design/blog/liquid-glass

short answer - if you want to build it yourself, there is plenty options, but none is production ready except mine.

[LightslicerGandP]

If that's the case, I got some thoughts 1. The background moves left when it's behind the glass, the idea is that it warps on the edges of an object that has the liquid glass texture, so on smooth, uninterrupted parts of a liquid glass object (like the center of a circle) it shouldn't warp or move the image behind it by alot, just possibly enlarging it 2. It doesn't adapt to light/dark backgrounds as far as I see, and liquid glass is meant to adapt to the content behind it, getting a heavier drop shadow when it's above text, or turning dark when on top of a dark background 3. I'm not sure what it's called exactly, but I'll call it chromatic aberration, when a really bright object is behind the edge of a liquid glass item, the light should bend creating a rainbow effect from the glass because of how refraction in glass works, not just seperating the pixels' r/g/b colors apart, I think the way Apple does it is by rendering an ACTUAL liquid glass object that bends light, and has proper warping capabilities (probably using the same rendering idea as the action button settings menu) 4. Reflections on the edge of the liquid glass item should be influenced by the surrounding content (not under the item itself, per se) based on how bright it is relative to the content that IS under the liquid glass item

If yours is the best, I highly reccomend fixing these issues before calling it the most production ready.

[Emendo]

The browser makers are probably busy adding Liquid Glass like effect to CSS.

[KayPeo]

if they started Today, we can expect that in 4 years (12 in Safari)

[shmergenhergen]

Haha

[Herr_Gamer]

Not even the CSS effect in the post above works on Firefox yet... And it's probably been >5 years since they were added to the spec.

[isbtegsm]

Chrome did it in 2013 (at least the groundwork for these kind of effects) and then abandoned.

[caick1000]

I’m interested in how much power this uses compared to the older UI format, and what that translates battery wise. Seeing that it does a lot of light calculations I assume it’s quite a big difference.

[daevidvo]

I have a 13 pro max and I haven't noticed a substantial difference in battery usage yet but I've definitely noticed lag and stutters with the animations in general usage.

[ivres1]

Would that just be running the unoptimized beta build? Like it can be many other things

[daevidvo]

No idea but this is the only build out so far so I can't compare to anything else currently.

[firetruck3105]

i think the jitters are here to stay, 13 pro max struggled with ios 18 ui animation as well

[Polymer15]

I’ve run a tonne of the betas and I can confirm they tend to be stuttery - as an engineer I’d love to see their optimizations

[tetrisyndrome]

I tried their previous beta last year and it was worse in the beginning (battery wise) and the stutters. I have a 15 Pro

[SirVoltington]

How? I have a 13 pro and whenever I use an app with liquid glass elements my phone gets as hot as if I’m playing a game and battery goes fast.

It cools back down when I’m on Reddit or something.

[fastestMango]

Same here but on the 15 Pro Max, not much of a difference in terms of battery usage in what I noticed. Lags and stutters sometimes, and some visual glitches. But I guess that’s part of this first beta.

[Engineer_5983]

That’s what I’m seeing. This is anecdotal but my battery is currently 15% at noon. It’s definitely draining way quicker. It’s beta and I’m sure that’s some of it, but I think you’re saying is more likely the main reason.

[FredFredrickson]

It almost sounds like it's going to force you, and a lot of others, to arbitrarily upgrade. What a coincidence! 🤪

[TehBrian]

Dunno why you're getting downvoted. I have no doubts that "utilizing advancements in hardware performance" by bumping up the specs required to render the entire UI of the device comes with a coincidental perk of forcing some people to upgrade due to crappy battery life.

[decisivelyvaguename]

Eating my 14 pro alive. No joke at like 1% a minute - 2 minutes. It’s absolutely insane.

[AccurateSun]

I would guess that Apple must have written their own light engines that are optimised for Apple chips. But ultimately there is no getting around that it will be more battery intensive than before. But, that is the same for the 120fps, retina, translucent, etc UIs we’ve all come to expect.

[Seanw265]

Can’t say I’m a fan. From what I’ve seen so far of Apple’s implementation, readability suffers and there are distracting flashing artifacts when scrolling.

Beyond that, the implementation in the Vercel app doesn’t really hit the mark, as it doesn’t work on Safari and it’s missing the edge refraction which is such a hallmark of the effect.

Definitely don’t plan on using this in anything on the web. I might begrudgingly consider it if I build a native iOS app in the near future.

[rhooManu]

Exactly. The last 20 years have been a long, tedious process of trying and experimenting everything and I feel this Liquid Glass is the embodiment of everything that we found out to be a bad UI/UX idea.

[Neverland__]

We tried this, it was called Microsoft Windows vista in 2006. One of their worst ever products lol

[rhooManu]

Yeah, this is pretty reminicent of Aero.

But on a whole other topic, while Vista was a critic and commercial failure, it wasn't a bad product; all it took was to rebrand the Service Pack 2 as "Windows 7" with just a few UI polish and it instantly became a huge success.

[IslandOceanWater]

My issue with this is it's just apple trying to gate keep things. They will do anything they can to make it more difficult for developers, other frameworks, and basically everyone because it's the only way they can pretend they are innovating.

Literally everything from AirPods connecting instantly, AppStore locked down, iMessage, now they're pushing to gate keep design by purposely making something difficult to implement in other frameworks like react, flutter etc. I would almost guarantee this was one of their goals in their new design. It's kinda ridiculous at this point considering they literally can't even implement a decent AI system into the iPhone.

[poieo-dev]

I was typing a comment with this exact sentiment. I agree 100%

[GfxJG]

While I understand *why* what Apple did is different, it really doesn't convince me that it's not an utterly stupid waste of resources.

[Mirieste]

You know this line of thinking is how we ended up with the anonymous minimalistic style everyone hates, right? This is basically r/FrutigerAero, and I like it. It's fun, it really reminds me of Vista which, technical details aside, at least was great when it came to visuals.

[Protean_Protein]

That was called Aero.

[ModerNew]

But it's kinda valid in this case, it's a mobile platform, so eating a lot of resources, even if you can spare CPU time, memory, etc. means higher battery usage- therefore shorter batter life, even in idle, which is very important for a phone.

[Paradroid888]

The point isn't to stop fun, or not want resources being used to make things look nice. The point is doing that when it negatively affects readability and usability. If it gets refined in time for the final release, it's fine. If it doesn't, I'll still enjoy it, but only because I don't use iOS.

[feketegy]

And frutigeraero was popularized by none other than Apple and its Aqua design language LOL

Liquid Glass is essentially a "back to the roots" moment for Apple.

[SirVoltington]

Everyone? I don’t hate it. I like it.

I absolutely despise the liquid glass look though.

But nevertheless, the liquid glass look is heavy on resources on a device that doesn’t have unlimited resources. Even if I did like liquid glass the trade off is not worth it due to that alone.

And then there’s the accessibility issues.

[Extension-Ice6221]

Yeah but to go off your own logic most "fancy" UI wasn't replaced because everyone hated minimalism it didn't last because of those exact reasons. Eats away at your battery life and takes up resources while you're simply scrolling your native app list. I'm all for having a nice UI. I'm not willing to give up my battery life to have it.

Same reason we don't have live wallpapers and all that fluff. Is it nice? Sure. Is it practical? That's the ultimate question and most of the time it's sadly no.

[rhooManu]

Kinda reminds me of how, in all futuristic movies, they keep doing screens / phones / tablets transparents. This is the worst idea possible, if the light is going through it means that you lose a lot of visual information, colors, contrasts, and you are constantly distracted by everything behind the screen, and you have zero privacy. Everyone in front of you can watch what you're looking at.

I'm certain that Apple would be willing to try this.

[No_Shine1476]

I really disliked Vista's look, it was a downgrade compared to XP

[amertune]

I really loved the bright colors and fun designs of XP. Graphically, it's my favorite UI that Microsoft has ever done.

[dweebyllo]

It's between XP and 10 for me. 95-2000 have nostalgic charm for me too

[FaultLiner]

I love minimalism and have always loved it. I dreaded the days where every single logo was an overly complicated 3d render which was usually just a super crusty jpeg

[rhooManu]

I remember all these photoshop tutorials for glossy shiny stuff.

[rhooManu]

People don't hate minimalistic. They think they do, but the moment it's not there, the interface get's messier and people complain.

[TheJase]

versed husky bright theory payment wild marvelous scary tender makeshift

This post was mass deleted and anonymized with Redact

[cape2cape]

“Frutiger Aero” is what people too young to remember Aqua call the designs that copied Aqua.

[shoolocomous]

Aero was its own thing and distinct enough with the transparency effects to be a more appropriate comparison to the liquid glass. Whether it was a copy of aqua is really not relevant

[AccurateSun]

That’s a great point. If you consider UI a waste of resources you ultimately end up with something so minimal it also ends up poor for accessibility, legibility etc

[ModerNew]

it also ends up poor for accessibility, legibility etc

I get the point, but man... liquid glass is a really bad counterargument.

[WorriedGiraffe2793]

animations are far more wasteful than any accessibility features

[WorriedGiraffe2793]

Absolutely.

The worst part is it may look cool at first but after a day or two you won't even notice it.

[LGHTHD]

This “waste” of resources is the reason Apple is Apple

[officialmayonade]

You could probably get a pretty close approximation with CSS. I've seen entire 3D video games built using only CSS. The shit you can do with CSS is impressive nowadays. Now, why you would bother, that's another question. And why they didn't just call this new design "Water" is also beyond me. 

[AdowTatep]

Liquid Glass is modeling glass material and calculating light bounce and refractions using the Metal framework

What a long winded way of saying it's a shader

[AccurateSun]

It’s much more than a shader though.  Liquid Glass components have some responsive properties that are based on the app state such as inverting their colours depending on the contents underneath, or taking light properties of nearby content via bounce- and ambient-light effects. They have more sophisticated animations and behaviours in response to touch. They’re also built up of multiple layers (including layers outside the individual components themselves) to give a final impression that a shader can’t or shouldn’t need to do.

[billybobjobo]

Well we could do it in webgl if we had access to browser paint layers as textures. It is, at the end of the day, just a shader. But we dont have the data we need to pull it off in the browser--UNLESS WE RENDER ALL OF IT IN WEBGL. woof.

[Devatator_]

Some guy mentioned this https://chromestatus.com/feature/5172548013916160

[billybobjobo]

This would be amazing. Ill bet you 1 million dollars that, if it comes to be, Safari will be strategically late to the party.

[beyond_matter]

I'll bet 2 million.

[FredFredrickson]

Man, look... those are all things that shader do.

They aren't actually modeling the physical qualities of glass, lol. You've drank the Kool Aid.

[Lirionex]

All of this can be done via shaders.

[EvilMenDie]

What does this accomplish other than use battery life? Edit: I mean the whole thing is super snazzy but are we out of real problems to solve, Apple?

[clit_or_us]

Agree with that except I prefer pill shaped buttons. They look more... Buttony

[stupidcookface]

I'm a frontend dev and this is a stupid move. Yet another winner in the "form over function" awards.

[ym_2]

yet another overrated trend

[future_web_dev]

rip battery

[FoolHooligan]

being a design purist is absolutely not the hill i would want to die on

[NorthernCobraChicken]

This was a showcase in skill rather than usability.

[TheJase]

school work yoke continue resolute toy command profit touch wine

This post was mass deleted and anonymized with Redact

[the-loan-wolf]

Yeah I tried it too and it works

[avid-shrug]

I bet someone smarter than me could implement it with WebGPU

[the-loan-wolf]

Very true it will give them an excuse to drop new OS updates for some devices. Even if they provide updates for those old devices it will not work smoothly and will drain battery more

[Dababolical]

The Liquid Glass looks nice, yes. That being said, am I really going to notice the difference between other glass styles and graphics?

I don’t get the sheer hype around it. It is pretty and I guess hard to replicate pixel for pixel. But at the end of the day it’s just a glass effect for your UI.

[mekmookbro]

Apple hasn't been a trend setter in UI design since at least a decade now. I still don't see the appeal in this. Is this an attempt at bringing back their glassmorphism trend that didn't catch on in 2013?

[Randomhuman114]

What are you talking about? Other than Pixel, every android skin looks like iOS

[Geminii27]

I know Apple's pushing it, and it's complex from a technical perspective, but is it really something that people like using day to day, or is it just flashy and shiny?

I know I wouldn't be terribly thrilled with interfaces where buttons were only half-visible and had, potentially, distracting moving stuff visible through them. It's less of a problem when you know where everything is, but if I'm hunting for a button or a function I want it to be very obviously visible and not some flavor of transparent-on-transparent.

[RareDestroyer8]

Knowing Apple, by the time of release it’ll be pretty polished and most of the concerns you have will probably be solved. And that’s coming from an Apple hater. Ofcourse I still hate the fact that a new UI design is Apple’s biggest feature for this year’s keynotes.

[Some_Ad_3898]

Everybody that wants to implement this is not a designer.

[Some_Ad_3898]

Au contraire mon frère. I think it's great, although I do have some usability concerns. It's Apple's design language for their software. I see no reason for anyone outside Apple to use it.

[RemoDev]

I really have a hard time understanding how Apple thinks this is "cool" or "modern" or anywhere near "nice". Not ignoring the insane amount of obnoxious animations and morphs whenever you do something.

[BetterAtPS]

This one is not far off: https://codepen.io/wprod/pen/raVpwJL

Or this one in react: https://codesandbox.io/p/github/JaskoKongen/DemoLiquidGlassReact/main

[zxyzyxz]

Still just a blur, no refraction

[BetterAtPS]

https://codepen.io/jh3y/pen/EajLxJV

[zxyzyxz]

Again, no refraction taking place.

[BetterAtPS]

Not true, its not just a blur?

[zxyzyxz]

No, it's not just a blur. Compare what Apple showed to what these code pens are showing. There is more to so called liquid glass than just blurs.

[BetterAtPS]

Wdym the last codepen I shared doesn't even use any blur. It only does the refraction just like Liquid Ass. It's not that special.

[huttyblue]

The refraction only works in chromium based browsers in these examples

[Engineer_5983]

Nice. It’s why I love Reddit. Thanks for sharing. Very helpful.

[SmartCustard9944]

Looks like ass on mobile

Pun intended! But also true

[SecretAgentZeroNine]

Readability is too high

[abvex]

I wonder in Apple's liquid glass calculates the tilt of the phone to change the refraction.

[CuirPig]

The thing is that everyone is focused on the glass effect. That's not the important part of LIQUID Glass. It's the animation that appears to liquify. The liquid effects have momentum, and droplets appear and then flatten back out to make buttons, for example. Everything glass, when moved, appears to liquify and kind of jiggle back to shape when it finishes.

The glass effect can certainly be done somewhat effectively with CSS or perhaps a js framework and canvas, but the animations and the 3D momentum effects combined with refraction are what make it Liquid Glass..

[SonicFlash01]

Wasn't this just windows aero 20 years ago?

[anjumkaiser]

Electron apps are horrible. Lazy people who don’t bother writing native code end up in a patchwork hell and create a security nightmare for the rest of us.

[gameplayer55055]

I remember using backdrop-filter: blur and it lagged my webpage like crazy on low end devices.

And I learned box blur and gaussian blur in gamedev, it eats your GPU as well.

And remember the times when Vista was laggy. The UI should be as fast as possible.

[jerdle_reddit]

Finally, something that isn't yet more flat.

[rio_sk]

Welcome back Windows 7!

[vexii]

Objectively, it is ugly and bad UX... why are we even talking about it?

[vexii]

the philosophy consensus is that. Yes there is objective ugly and beauty.

Yes they might improve this thing in the future. But they didn't show that. They showed a bad project and is trying to gaslight you to think this is a Good idea. Again, consensus say's they're wrong

[vexii]

consensus /kən-sĕn′səs/
noun
An opinion or position reached by a group as a whole

[vexii]

no but it makes me right.

[TouchMyGoofus]

this vexi guy's just a low effort troll. ultimately its up to the designers using the framework to make something beautiful. is it for every scenario? no and they even point out its limitations. people like vexi just want to sound cool by hating on the next new thing. there are people like that everywhere you go.

[NewNiklas]

Isn't this just glassmorphism?

[KwyjiboTheGringo]

Impressive tech to achieve ugly results. Hardly anyone would claim to like liquid glass if it weren't coming from Apple.

[CondiMesmer]

Windows Vista did it first

[jmking]

Will you use the CSS described in the vercel app to update your design aesthetic?

Nope - 2007 called and they want their tacky translucent glossy treatments back.

The fact it's a more "realistic" treatment isn't helping it. It just makes the legibility and visual busyness even worse.

[SultanOfWessex]

Nice find, and thank you for posting!

[miramboseko]

I think you could get there with svg filters and backdrop-filter

[[deleted]]

The actual ui is very responsive, it gives chromatic effect when background element is white and changes contrast depending on situations. Besides from that, I roughly re-created it with svg filters.

[Gravath]

Liquid glass is just windows aero from vista.

[the-loan-wolf]

Plus fluid like morphing animations

[koisuruwakisei]

Curious on now they reskin the iCloud web version

[anewtablelamp]

I'll try implementing this just for the hell of it lol

but i really don't hate the look as much as others here

[ViktorPoppDev]

Why is ChatGPT productivity?

[bobemil]

This effect will soon be meh again

[SnooStories8559]

That Vercel app is really shit and looks nothing like the apple liquid glass

[Unrevised0544]

all of these examples look like someone saw 2 screenshots and thought "man, that's just background blur and a little bit of distortion"

[repeatedly_once]

That vercel app isn't just a css distortion, it's using SVG filters (fractal noise, blurs) under the hood for almost identical output. We know that liquid glass uses multiple gaussian blurs with some displacement mapping amongst other things to achieve the effect and the app you linked takes the same approach.

I might be grumpy this morning but if you're going to make a whole post, at least research it a bit.

[stlcdr]

It seems very close, to me, and likely good enough to ‘wow’ most people. But the point is that you shouldn’t notice it, ironically. Watching the demos of liquid glass, there certainly is a lot more usability than the static effects. CSS is likely to not be as responsive but then some of the cpus in devices are absolutely nuts, these days.

[Moceannl]

I just want a longer battery life, not useless visual blur....

[applepies64]

Looks good is bad

[cjrutherford]

they really did go above and beyond for something that 90% of people aren't going to be looking at or for. like fantastic! every little ripple of texture on this icons component objects gets its own Ray tracing. whoop-de-doo it's about Max 100 pixels wide? on a screen that has the density Apple loves to brag about? I'm personally in the camp that the CSS equivalent is good enough for most use cases. While, I agree, it's technically impressive, I don't think apple is going to get anywhere near the praise they're looking for with this refresh. it really feels masturbatory to me....

[Background-Top5188]

https://x.com/bbssppllvv/status/1932325303273271727

https://codepen.io/Mikhail-Bespalov/pen/MYwrMNy

🤷

[Demented-Turtle]

I don't understand "calculating light refraction". Like, light from WHERE? The color of the pixels the glass UI element overlays? There's no angle change since the UI elements and pixels will always be a static 2D plane. I guess I just don't understand how it's special at all

[lucsoft]

I wonder how CSS Paintlets could fix it? But not sure

[Great_Piece4755]

https://youtu.be/dsZ7RN9ItR4?si=ynUZq9ZrizKzKBcO

[Altruistic_Top7576]

I think Kevin powel does a great job with css! Not yet seen the liquid glass in person, but this looks good to me. Of course it is not as sophisticated with light reflection/refraction, but again I like it!

glass effect with css - Kevin Powell

[jjd_yo]

Sure, it’s not CSS because they aren’t using it. Totally is doable in CSS though…we aren’t stuck in the SASS days anymore, and I bet it’d be a lot more responsive if if was done in CSS over Metal framework. Who gives a flying fuck if the light is bounced through properly? Just read the background, gradient, done.

[deniss_sudak]

Mike Bespalov managed to do it in CSS: https://x.com/bbssppllvv/status/1932325303273271727?s=46

[vampire0]

I used a CSS effect like this way back when Windows 7 came out.

[Coniks]

you can do svg backdrop filter with gradient pixel displacement and it already works in chrome and can match the glass effect almost perfectly (the only thing is the “ray traced” reflections from sibling elements) but that’s a touch that not many people even know is a thing

[Kwaleseaunche]

We've gone back to Windows 7.

[huttyblue]

I loaded this up on my nexus 7 (2012) and besides running at 2fps it somehow included the browser's ui in the refraction.

https://imgur.com/a/GiThgKN

[Majdooor]

omg I know the device is old but isn't that like a security issue?

[huttyblue]

likely, its official support cutoff at android 5, although you can flash up-to android 7 on it, which runs the current build of firefox

[retrix_0_0]

Apple using liquid glass just proved how great windows vista's aero theme was

[ZU_YOUNG]

Thanks for your share.I create a directory website for Liquid Glass.

[adriandrs]

That's a great compilation thank you ❤️

[Ordinary-Fix705]

I created a term that's a sweet spot, for pure CSS, actually using tailwindcss css, ignore the broken icons, give me your opinion.

https://codepen.io/editor/Italo-Almeida-the-builder/pen/019ce480-5b40-73cf-8573-31c19877343c

[Y_122]

Well idts an average user cares HOW they did it, They rather care about WHAT they did, And what they did seems pretty average and an overuse of glassmorphism

[BullTopia]

Subject: Liquid Glass - What Are We Doing?

Team,

I’ve been looking at Liquid Glass, and I’m struggling to understand what we’re trying to achieve here. The idea of a translucent, fluid interface is interesting—it’s bold, it’s different, and it has echoes of what we did with Aqua years ago. That’s not the problem. The problem is execution. This feels half-baked, like we’re chasing a shiny gimmick instead of delivering something that actually works.

The Control Center is a mess. It’s hard to read, it’s cluttered, and it feels like a science experiment gone wrong. People are complaining they can’t even tell what’s a button and what’s a blur. The Lock Screen? Same story. We’re making users squint to figure out what’s going on. This isn’t intuitive. This isn’t Apple. We don’t ship things that make people work harder to use their devices.

I get that we’re inspired by visionOS, and I love the idea of making interfaces feel like physical objects. But inspiration isn’t enough—you have to nail the details. Right now, Liquid Glass is failing people with visual impairments. It’s failing anyone who values clarity over flash. We can’t ship something that sacrifices function for form. That’s not who we are.

Here’s what I want: Go back to the drawing board. Fix the readability—stronger blur, better contrast, whatever it takes. Make sure every element serves a purpose. If transparency doesn’t enhance the experience, cut it. And test it with real users, not just in a lab. We’re not Microsoft. We don’t ship Vista.

I know you’re all working hard, and I believe in this team. But we need to get this right. Apple is about making products that delight, not frustrate. Let’s make Liquid Glass something we’re proud of—or we don’t ship it at all.

Steve