Yesterday, Apple dropped something unexpectedly beautiful at WWDC 2025. While we were all waiting for the next AI breakthrough, Tim Cook surprised ...
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
Backdrop blur is not liquid glass effect. You lack the main ingredient - background distortion.
Check this out - codepen.io/chakachuk/pen/QwbaYGO
That project is amazing! I've seen a few others that do a great job replicating that effect. I actually tried to recreate it using only CSS. I was aware of the distortion and did everything I could to get something similar, but I couldn’t find any CSS properties that achieve the same result.
Hopefully, in the near future, new properties will come out that make it possible with just a few lines of code. For now, thanks for sharing! 😉
Yes, at the moment, the only way to achieve distortion is by using custom CSS SVG filters. However, the main drawback is that mobile Safari—and even Chrome—don’t seem to support it, despite caniuse.com indicating that they do (likely due to a WebKit bug). Hopefully, we’ll see a built-in CSS filter for distortion in the future, similar to how we currently have blur and brightness, especially if Apple’s liquid glass design becomes more consistent and widely adopted.
Pretty cool, but it definitely makes things harder to read, especially the colour contrast. Note this comment on the CSSWG issues site, (github.com/w3c/csswg-drafts/issues...) where it's made clear that at least by the time it ships, Apple will include mechanisms to increase the contrast to meet accessibility norms.
That's true. I had problems replicating the design because I couldn't find a good compromise between the opacity of the "glass" and the contrast with the white writing. I hope that some guide lines will come out.
Just watched the keynote and Liquid Glass is a nice step forward. Feels like Apple finally brought some life back into the UI. Looks clean, especially on iPad and Vision Pro, but the contrast issues are real. Some of it leans more aesthetic than usable.
The on-device foundation models are the most exciting part of Apple Intelligence. Local and privacy-focused makes sense for them. Siri still feels a bit behind though, more of a rebrand than a real upgrade.
Many users have commented on this contrast issue. For now, it’s still in beta, and it's likely that many of the problems being experienced now won’t be present in the official release.
That said, I also agree that Apple has focused more on this graphical update than on Apple Intelligence integration or adding more functionality to Siri. Let’s see what happens during the presentation of the next iPhone.
Thats not liquid glass i made somehat close to liquid glass here is the link :alexcruz122.github.io/True-Liquid-...
i use edge browser and not sure about other web browser support
mom can we get liquid glass?
mom: "we have liquid glass at home"
What you made is not something new. You can see in apples liquid glass design the lights actually bend like in a real glass. Along the borders. But in your case it just a blur
At the moment, unfortunately, it's not possible to fully replicate the distortion using just CSS. There are other projects that manage to reproduce Apple’s effect quite well — there's an amazing one in the comments — but they have very limited support on some browsers. I tried to get as close as possible while keeping broad browser support.