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.
Backdrop blur is not liquid glass effect. You lack the main ingredient - background distortion.
Check this out - codepen.io/chakachuk/pen/QwbaYGO
Yeahhhhhhhhhhhhhhhh !!!!🔥🔥🔥🔥🔥🔥🔥🔥🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩
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.
Doesn't work on Firefox