Liquid Glass (Approximation)

LiquidGlass.hype.zip (1,6 MB)

4 Likes

Maybe a YouTube video about this would be good for your channel. :smiley:

Windows Vista like :smiley:

I'm surprised this isn't done without a backdrop blur!

Yeah, it's more like frosted glass, but the actual liquid glass effect I wouldn't know how to do it with regular DOM elements and CSS effects. Probably need to be a shader or something like that and live in a canvas.

Here is a liquid glass filter that distorts the background using an SVG filter, but unfortunately, it doesn't work in Safari. Maybe somebody's gotta work around for Safari, but it seems like they're still behind on SVG filters on DOM elements.

LiquidGlassFilter.hype.zip (1,6 MB)

2 Likes

It doesn't work on Firefox for me either, but it is a cool effect on Chrome!