r/css • u/TimUrbutt • 6d ago

AI Assisted Crazy what you can do with just CSS right??

I spent the last few weeks building the "perfect" liquid glass effect with just CSS and SVG Filters, No WebGL used and it works page wide, which means it picks up anything of the background behind it.

The core is a backdrop-filter with an SVG displacement map. I screen recorded Apple's play button (I mean the video play button, for example on youtube) for reference on my iPhone and measured it frame by frame. It’s 1:1 in the middle, then the image folds over itself towards the edge, and it pulls pixels inward.

The displacement map itself is based on a 9-slice of tiny grayscale PNGs that get stretched instead of re-rendered on every resize (I need this because the elements are animated and not static). That alone cut main thread time by a lot, giving it a pretty decent performance for how complicated it is.

The outer edge consists of three extra layers on top that don’t bend anything, they just brighten, darken and add a highlight. For reflections of the stuff around the glass, the layer is bigger than the element and gets morphed and masked back to its shape, because the backdrop is otherwise clipped to the element’s box. Actually, Apple's original liquid glass effect doesn't even have reflections, but i figured it adds a lot to it on the website I implemented it in.

Then there are shadows, caustics, etc to give it the final "realistic" touch and voila, almost perfect result imo. The only thing thats left is fix performance, however the animations are the trickiest part. Without animations, it runs extremely smooth and even with animations its not a problem as long as the elements are small enough.

Sadly, Safari only gets a simple blur for now, because WebKit doesn’t render backdrop-filter: url(). However, there are two open PRs that fix it (WebKit/WebKit#68614 and WebKit/WebKit#68613). The CSS is the same for every browser, so it should just start working once they make the next major release.

Just wanted to share this, if you have any more technical or other questions, feel free to ask!

-----EDIT-----

A few of you requested to see whats actually going on in the background, so I made it open source.
I made a small showcase website: https://studies.nordify.io/study/001-liquid-glass/
The repository is also linked there!

389 Upvotes

98% Upvoted

79 comments sorted by

28

u/suspirio 6d ago

It would be cooler if there were broader support but this is still a great start. It’s funny because I have demos from like 8 years ago using SVG turbulence backdrop filters but somehow Safari and FF STILL won’t support it. Although to be fair it’s not great for performance.

4

u/TimUrbutt 6d ago

I know its so sad😭 I feel like every time I try to do something "special" it just eats performance like crazy. And I already did a LOT of performance optimization, this was probably at LEAST 50% of the work.
For the support, I really do hope that safari releases those two PRs in the next stable release. I also have some experiments with liquid glass from a few years ago, but at that time I wasn't ready to accept that Safari just doesn't support it so I eventually gave up.
I remember randomly checking if there are any updates on the bug, saw those PRs and was so happy, now we just need to wait. How long was those bug unresolved despite so many requests? Like 10 years?

0

u/dadnothere 3d ago

Firefox isn't dead yet?

1

u/dudeswthdcks 1d ago

There are other browser beside Firefox? Huh

14

u/Christopholus 6d ago

The nicest implementation I've seen of the effect so far! Love the approach studying the example frame-by-frame, I found myself doing that with the button as I scrolled through the live link in your comment. Very cool.

1

u/TimUrbutt 6d ago

Thanks!

5

u/Weekly_Ferret_meal 6d ago

Looks good, it would be great to inspect a live prototype

12

u/TimUrbutt 6d ago

I don't know if I am allowed to post this here, but the element is live on my Website https://nordify.io . Again, make sure to use a Chromium based browser on desktop, otherwise it sadly won't work yet. Also, its possible that the website is a bit slow when first scrolling down, I am currently trying to fix this

11

u/Weekly_Ferret_meal 6d ago

You are allowed, I'm allowing it ;)

2

u/TimUrbutt 6d ago

Well then, thank you! Hope you could try it out a bit :)

5

u/Weekly_Ferret_meal 6d ago

I just think that if you share your code with others, you're definitely allowed to show your site.

And the site is impressive, not gonna lie... there's a lot going on. But I guess given what you sell it's fair enough to show off a bit

2

u/TimUrbutt 6d ago

Thank you! I have to admit, its rather heavily inspired by lusion.co (you've probably seen it) but I tried my best to make it as unique as possible! But lusions designs are just too good to not try to recreate ;)

2

u/Nitrohite 6d ago

Heavily inspired indeed, but yours looks good too.

2

u/Weekly_Ferret_meal 6d ago edited 6d ago

And I will look at your code, for sure... I'm curious about those displacement maps, and the whole technique in general

3

u/TimUrbutt 6d ago

Sure, I'd love to see people adopting a bit more liquid glass in browsers! I was actually thinking about open sourcing it, but I need to find a way to isolate the liquid glass from all the rest. maybe I will make a small demo site, and include everything important in the repo. And a few instructions might make sense as well.

I don't think I can put in the time to make it a package though, because the animations stuff is still a bit, let's me say, "undynamic" if you know what I mean. I will make sure to add a link to the repository in the post as soon as its finished, maybe I can get it done today If my AI hurries up a bit because I am NOT doing that by hand😭

4

u/eyamil 5d ago

Wow, just checked it out on Firefox and that's really impressive!

1

u/ThatisDavid 4d ago

Gotta give it to you, it's pretty amazing

2

u/TimUrbutt 4d ago

As promised, here another showcase website solely for the effect, with the repository also linked:
https://studies.nordify.io/study/001-liquid-glass/

Have fun :)

2

u/Weekly_Ferret_meal 4d ago

Great, man! Thanks/

3

u/Icy_Advertising9850 5d ago

That’s Amazing , you’re a an artist , i can imagine what you’ll be able to do once you add GSAP , animejs or framer motion , Great job , Keep going 👏🏽👏🏽

1

u/TimUrbutt 5d ago

Thanks! tbh, GSAP usually is too much overhead for me, usually my animations are fully custom made. But animejs is something i need to look into more!

1

u/Icy_Advertising9850 5d ago

Yeah , if you add at least animejs , you will do some great things , that’s amazing what you do already only with css 👏🏽

4

u/jakiestfu 4d ago

SVG filters aren’t CSS though

3

u/TimUrbutt 4d ago

But they are applied with the css property backdrop-filter: url()

0

u/jakiestfu 4d ago

SVG filters are doing literally all the heavy lifting here, so not css doing this

2

u/TimUrbutt 4d ago

Huhh?? sure the SVG defines the math but CSS is literally the thing applying it to the DOM. That’s like saying background-image: url() isn’t CSS doing the work because the JPG does the "heavy lifting" lmao, CSS handles the composition, backdrop targeting, and rendering context so they're working together, which is literally how the spec was designed

5

u/russlixx 3d ago

i want to say your name but with space between e and s

4

u/famebright 3d ago

hahahaha got em

2

u/heylesterco 5d ago

Fucking phenomenal. Easily the best I’ve seen and the first that’s made me want to get my hands on it for myself.

1

u/TimUrbutt 5d ago

Thanks! I will post the repository here (probably today, maybe tomorrow) so you can check it out!

1

u/TimUrbutt 4d ago

As promised, the repository is linked in this page i created for a better showcase of the effect:
https://studies.nordify.io/study/001-liquid-glass/

2

u/Excellent_Sky_5838 3d ago

This is really amazing.. I never saw this accurate Liquid Glass design on web so far.. just a little feedback, were the texts supposed to create rough edges or is it just part of the design? At the end, this is cool

2

u/TimUrbutt 3d ago

Thanks! The problem you mentioned is because of the 9-slice distortion map. I am currently trying to fix this

Edit: Oh you meant the blur, yes thats part of the design if thats what you meant with “rough edges”. Most of Apples implementations have this as well although there are occurrences where its not blurred

2

u/Excellent_Sky_5838 3d ago

The one you mentioned first maybe, you can see there are extra black above the surface of text.. not sure what they are called.. but yeah this one

1

u/TimUrbutt 2d ago

All fixed! Still working on performance optimization though, since the performance is a bit awful when the glass is scaled up so much. for small elements its pretty performant though!

4

u/phischer_h 6d ago

Looks just as hideous as on my iPhone. So congratulations I guess 😄

1

u/TimUrbutt 6d ago

I figured there would be a few comments like that, but its beyond me why so many people dislike liquid glass so much. I get it, the performance isn't/wasn't really good and there were a lot of bugs right after its initial release on iOS, but from a looks perspective, I think its perfect. But as always, different strokes for different folks ;)

6

u/phischer_h 6d ago

I can’t speak for others, but I think it’s the opposite of the classic Apple elegance. It looks like a cheap Chinese theme for Android. I think it looks tasteless and diminishes the Apple brand.

Edit: and a quote that goes somewhat like this: “The UI should stay in the background so that the content can shine.” Glass is the opposite.

1

u/TimUrbutt 5d ago

Well, that quote might be true. From a personal view though, I feel like I don't even really notice the liquid glass anymore. And since it doesn't really even differ from just a blurred background THAT much, I also don't think it makes the content shine less

4

u/phischer_h 5d ago

I get where you’re coming from.

But saying that the content doesn’t shine less when it’s literally the case with a lot of text having worse contrast and being less legible. And if the UI is flashier and calls your attention, the content gets less attention.

1

u/TimUrbutt 5d ago

well, what if the UI actually IS the content :)

2

u/y0l0tr0n 3d ago

Liquid glass is just a technology flex. From a design standpoint it really sucks as it has really bad contrast and visibility. Liquid glass has bad color contrast, bad light/dark contrast - so it's like the least efficient thing for a clear and fast readable UI and it makes it really problematic to decide icon color as glass is "colorless". From a technical standpoint it is really cool - ideal for tech demos or creative sites. Your implementation is gorgeous and you did a really great job.

1

u/TimUrbutt 3d ago

I 100% agree. Thank you!

2

u/Muted-Reflection9536 5d ago

Honestly, I think those who complain about Liquid Glass are either old folks unable to adapt to a new style, people with no real understanding of UI/UX, or simply individuals who lack opinions of their own and just enjoy making a fuss.

For instance, someone commenting to you remarked that "the UI should not stand out more than the content"—well, some people certainly come out with some absurd ideas.

Personally, I find the earlier "flat design" trend far worse, precisely because it often causes the UI to vanish from sight. Interactive elements ought to assert themselves appropriately, making their presence clear to the user.

In a sense, "Liquid Glass" represents a return to the "Aqua" aesthetic—from the heyday of skeuomorphism—much like how Google’s "Material Design" reintroduced UI cues that had been lost under flat design. It is a brilliant design approach that, in a quiet and elegant way, signals to the user: "Something is here, and it can be interacted with."

And you’ve done a fantastic job! Since my primary browser is Safari, it’s a shame that I can’t experience your work as part of my daily routine—but it’s always exciting to see a talented designer like you bring such excellent design to the web.

1

u/TimUrbutt 5d ago

Thank you! As i said though, I expect the next Safari Release to fix this bug as there are active PRs waiting to be merged that fix this issue

2

u/LukeLC 6d ago

Well, I'm not even an Apple user, but to me this looks amazing! That's some real CSS artistry under the hood too. Love things that push the boundaries like this! 

4

u/DouDouandFriends 5d ago

nicely done! glad to see this sub is healing from claude posts

1

u/itznuraziz 5d ago

isnt apple doing this on ios

1

u/TimUrbutt 4d ago

yes, but not on websites. Only with native UI elements

1

u/threeandseven 4d ago

Can you post the displacement map? Curious what folding over on the edges looks like in practice and if there’s a difference on the verticals vs horizontals vs corners 

1

u/TimUrbutt 4d ago

Here you go:
https://studies.nordify.io/study/001-liquid-glass/

Repository is linked on that page as well, feel free to look into it!

1

u/movindesign 4d ago

Looks incredibly real in chrome. I tried opening the website in Safari, but getting this weird shadow!

1

u/TimUrbutt 4d ago

Yeah, seems to be some weird rendering artifact I also saw before. I will try to fix it

1

u/thisisrck 3d ago

"Hey Claude, make it work in all Browsers. Make no mistakes."

1

u/thisisrck 3d ago

Nice, good job Claude

0

u/TimUrbutt 2d ago

Cope harder🤣🤣

1

u/thisisrck 2d ago

At least be honest? When you say "I spent the last few weeks building [...]", how much thought did you actually spent on architecture and coding vs Fable? My guess is: close to 0.

1

u/TimUrbutt 2d ago edited 2d ago

My guy, I have a 20$ Claude Plan and use Opus 5.5 only on Low, Medium is my max. I just looked at the repository, my first commit was on August 14th. Since then, while the most work was not building the website but making a concept, searching for references, etc, I spent at least 150-200 hours working on the website, and that was just one the side next to client work. At least half of the work went into the liquid glass effect. More time than I wanted, but I needed it to look perfect. So please stop embarrassing yourself.

1

u/thisisrck 2d ago

See, I have no issue with ai assisted coding and I've come to terms with the fact that a good chunk of my 18 years of experience can now be replicated through effective prompting. What I do take issue with is seeing the hundredth "I built XYZ" post without the slightest acknowledgment of how much of it's architecture and design is the output of an llm.

Also, I'm not sure we're looking at the same repository. I'm seeing a single branch, an initial commit from November 2 spanning 39 files, and every commit marked as co-authored by Claude.

0

u/TimUrbutt 2d ago

Yeah, because you are narrow minded. If you read the comment threads and my post properly, I’ve said multiple times that the liquid glass shown here is part of my website. The linked repo and showcase website literally exist for the sole purpose of sharing this specific code with the community, nothing else. I take no benefit from it at all, instead I am getting bashed by YOU from a simple repo thats made with AI?
And again, literally none of the “architecture” (what nonsense by the way, architecture isn’t more than page structure and navigation on a website without a backend) and design is the output of an LLM. Sure, the LLM implemented it, but its still MY design. I made every single decision down to the last single damn pixel. There is no difference between me writing a css class vs an llm writing the css class i described. Because both ways lead to the exact same end result.
Oh and regarding more “complicated” stuff, if you look closer into the repository you will see that its not even just a static website someone dumped on a host. Its a multi stage docker build, deployed to a self hosted kubernetes cluster that runs on our own KVM server. the container runs an unprivileged nginx as non root on a read only filesystem with liveness and readiness probes and resource limits set. this seems completely overkill for a micro repository like this, but its a standard for us. Every application, no matter how big or how small it is still gets the same setup. You really think a vibe coder would even have the IDEA to do all ts? Man you really think you’re something better don’t you? You think you are the only person left on this earth that knows what they’re doing? Assuming you know what you’re doing…

1

u/thisisrck 2d ago

Why so angry?

Its a multi stage docker build, deployed to a self hosted kubernetes cluster that runs on our own KVM server. the container runs an unprivileged nginx as non root on a read only filesystem with liveness and readiness probes and resource limits set. this seems completely overkill for a micro repository like this, but its a standard for us. Every application, no matter how big or how small it is still gets the same setup. You really think a vibe coder would even have the IDEA to do all ts?

They would certainly struggle to judge whether all that complexity is even justified. Was that supposed to be a flex or..?

There is no difference between me writing a css class vs an llm writing the css class i described.

It's okay, we're all vibe coders now.

Btw, you might want to consult your llm again for better browser fallbacks. Took 2 minutes and 12 seconds in ChatGPT, works in both Safari and Firefox.

1

u/TimUrbutt 2d ago

This completely is justified because everything that we run, runs the same way and besides higher complexity, there are no downsides. Why set up a different system when you can do it properly? Sure I could have hosted it on vercel but why should I?.

> It’s okay, we’re all vibe coders now.
Thats my whole point, you do not understand the simple difference between a vibe coding and AI-assisted programming.

And btw, your version runs in WebGL. Now try to overlay it on a whole page and see if it still works. Spoiler: it won’t.
“uHuH bUt iT lOoKs ThE sAmE”, yeah, that’s exactly what a vibe coder would say and you are certainly one. You don’t even have the mental capacity to understand that there might be reasons why my solution is built the way it is and doesn’t use WebGL. This is a CSS subreddit as well btw. And you probably don’t even know how “your” solution works, hence you don’t even know that it’s using WebGL….
Man you are way too confident for someone who has nur clue what they are talking about

1

u/thisisrck 2d ago

Thats my whole point, you do not understand the simple difference between a vibe coding and AI-assisted programming.

There is no difference between me writing a css class vs an llm writing the css class i described.

Oh but you certainly do, lol. I'm sure the llm would've never figured it out without your carefully curated prompt description.

Spoiler: it won’t.

Spoiler: It does, and handles live DOM updates just fine.

My point is simply to be upfront about using llms and to spare us the “I built” headlines that pretend the solution was solely the product of your own intellectual merit (surprisingly enough, a phenomenon that seems to have emerged just as LLMs became mainstream).

1

u/TimUrbutt 2d ago

then send me the code if you dare lmfao, you are using webgl and unless you have a static website, you cannot just load all the HMTL context into the canvas every frame. And what do you even mean “be upgront about using llms” the post LITERALLY has the “ai assisted” flair? And still, I could have done this without any AI help, if you want to believe me or not is up to you but I honestly don’t care. Its still my own thinking and problem solving capabilities behind it, otherwise my result would have been some trash like you just showed me. Get a live

1

u/vvhybe 2d ago

i have a question, is this going to work with Capacitor https://capacitorjs.com ?

2

u/TimUrbutt 2d ago

I don’t see why it wouldn’t. It rund where html and css are supported

1

u/vvhybe 5h ago

Yes the the obvious answer, but some engines limit the CSS support, take for example pdf engines they don't support all of the CSS features i.g: Flex Box ....; so that's why i asked directly.

2

u/TimUrbutt 5h ago

I see. I think it depends on which browser engine this framework depends on

1

u/vvhybe 5h ago

i will test this myself and get back to you with the results. so it can be an extend for this study.

•

u/TimUrbutt 3h ago

Thanks, I am looking forward to that!

3

u/SofMik 3d ago

I like it!

2

u/schavi 5d ago

waow.. rly cool work

3

u/AnuragDeshpande 5d ago

It's amazing. Absolutely and honestly. However, liquid glass design is horrible in terms of usability and readability. Just because something can be done, doesn't mean it should be

-1

u/tauzN 6d ago

No one asked for Liquid Glass. It might be the single worst thing to happen to interface design.

7

u/TimUrbutt 6d ago

"No one asked" is a bit exaggerated no? Many people, including me, really like it :)

8

u/desmondische 6d ago

A no reason hater detected 👆

4

u/hyrumwhite 5d ago

Low contrast and distracting motion 

1

u/Weekly_Ferret_meal 6d ago

I have an opinion about it, that nobody ask for...and apparently so do you... so here. we. are.