HN Reader

Show HN: CSS generator for a high-def glass effect

418

117

There are lots of glassmorphism generators out there, but I wanted to push the effect further! This project is the result of months of experimenting with CSS property layering and battling browser quirks.

Cross-browser compatibility is actually the reason I rely on ::before and ::after pseudo-elements to build up the effect. Move the color/opacity to the main element, and you’ll get weird color bleed on the corners in Chrome. Move the texture, and it muddles the bevel’s specular highlight. Move the bevel, and it gets blurred out by the backdrop-filter. And so on!

Layers include: * Adjustable blur, brightness, and saturation (backdrop-filter) * Subtle translucent texture * Faux 3D bevel (using box-shadows, not an outline)

Glassmorphism is rather heavy on resources, so it’s best used as an accent and avoided on wide desktop elements. Should be compatible with recent versions of Chrome, Safari, and Firefox (desktop and mobile). If you spot bugs or rendering glitches, I’d love to know!

Side note: this is an early preview of a framework-agnostic glass SCSS/component library I’m building.

This suffers from the problem of only blurring using the pixels immediately behind the surface, as demonstrated well in https://www.joshwcomeau.com/css/backdrop-filter/#the-issue. That and the discussion in https://news.ycombinator.com/item?id=42302907 are good reading. If the backdrop is going to move underneath, this is fairly important; if it will be static, it’s not normally important.

4 days agoby chrismorgan

Looks pretty good.

But missing out on the refractive aspect of glass takes away the strong visual separation of layers that IMO is Liquid Glass's biggest contribution.

Material has these wonderful designer resources showing how the app ought to be built of consistent moving layers, shown in 3D from the side. It's clear that there's these layers. But once you go 2d, put it all together, its incredibly hard for me to find all the features. The number of times that there's an action button in some corner that folks don't see massive. Motion sort of helps highlight the chrome vs content, but there's just so little thats visually defining.

Liquid Glass's biggest strength IMO is the edge distortion. That when the content moves, there's this non-linear motion that the human visual sense immediately picks up on. Static screenshots don't always look great, but in motion there's so much more distinction of elements than anything else I've seen.

And that key refractive element, that takes such huge advantage of human's motion sensing, is missing here.

I'd seen one other great web web demo, but am struggling to find it right now. I did find this one, which I don't think looks as good, and the performance is bad for me here on mobile. But it nicely breaks down steps and shows how complex a task this can be. Getting these edge distortions in is hard, and relying on SVG filters to do it is a brutal path to hack together. https://atlaspuplabs.com/blog/liquid-glass-but-in-css#breaki...

There is a collection of attempts (CodePen Spark) at Liquid Glass that I just found. Second link is one I thought did a pretty nice job, via very specifically pre defined / hard coded SVG. https://codepen.io/spark/453 https://codepen.io/lucasromerodb/pen/vEOWpYM

4 days agoby jauntywundrkind

It's a nice effect, but to me this doesn't really feel like glass.

I think the most immediate difference is how light has no interaction with the bevels. I also expect some light to shine back into the glass and affect the lighting and coloring. It's not enough to just throw a blur in there.

Also, glass can have its own shadow with some interesting caustics (not sure even Apple does this). I see the shadow here, and it feels like a simple drop shadow. It makes the box feel like a flat card more than a 3d physical object which I think is part of the new trend.

Either way, This will not be easy to emulate with just css, it's probably more suitable to be a shader running in a gpu.

4 days agoby magic_hamster

I've made a JavaScript version that actually refracts elements on the page, check it out: https://real-glass.vercel.app/

3 days agoby explosion-s

i collect these! https://github.com/swyxio/spark-joy

others

- https://ui.glass/generator/ Get started with this free CSS generator based on the glassmorphism design specifications to quickly design and customize the style properties.

- frosted glass sticky header https://www.joshwcomeau.com/css/backdrop-filter/

- glassy glassmorphism [codepen](https://codepen.io/a-trost/pen/dypQzwq), [in context](https://codepen.io/TurkAysenur/pen/ZEpxeYm)

  ```css
  .blur-and-rotate {
    border-radius: 20px;
    backdrop-filter: blur(20px) hue-rotate(120deg);
    -webkit-backdrop-filter: hue-rotate(120deg);
  }
  ```

4 days agoby swyx

Really nicely done! It's always surprising to me how often computer graphics isn't "one weird trick" and more like "5 layered tricks." Doing it with cross-browser compat is an additional challenge.

Do you have a sense of which aspects are the most resource-intensive? Naively I would guess it's the backdrop-filter.

4 days agoby mbforbes

This looks like it uses similar techniques to my own glass implementation: https://news.ycombinator.com/item?id=42225481

Especially with respect to the abuse of box shadow.

4 days agoby tyleo

Small issue: the shadow between the top and the scrollable area with the toggles and code fades out when you scroll down (presumably it should be initially hidden and fade in).

4 days agoby armchairhacker

I might be missing something, but I think this would be a lot more useful to me on mobile if I could hide or collapse the box. Instead, it takes up the entire screen and I can't really even see the effect behind it. I'm still interested enough that I'll probably try it again later on a larger screen, but I think some kind of option to hide the box would go a long way!

4 days agoby smeej

That content scrolls quite slow on my phone. Is there another scrolling effect that makes it slower on purpose or it's a side effect of the glass look?

4 days agoby mikedelfino

Pro tip: Apple adds fancy GPU effects because Android can't rely on good GPUs, so Apple can continually define premium.

Thus, the odds you're doing glass-morphism via a Gaussian blur and drop shadow in CSS, are exactly 0. They are assuredly at abstraction levels far below that.

(disclaimer: worked on Pixel, did the color extraction + color system stuff for Material You)

4 days agoby refulgentis

Wow, that Video tab looks gorgeous. I still don't understand yet how it's actually done.

4 days agoby tempodox

I haven't heard anything but negative comments about liquid glass from any apple users I personally know.

Here goes everyone else rushing to do things just because apple did them.

Not everything apple does is good. This is one of those cases.

3 days agoby vrighter

Are users allowed to copy the referenced egg-shell.png and host it themselves or is this connected to some sort of metric you like to gather?

4 days agoby jand

I can see people using this to have their websites (or apps) fit into the design of Apple's OS 26 design language. Neat!

4 days agoby thecosas

> This project is the result of months of experimenting [..]

It shows, this is awesome, especially that rice paper effect!

4 days agoby utopcell

Is this considered new design? What is special about it? I don't see much of a difference compared to the Aero glass effect in Windows Vista from 2006. I've also seen it on many websites, using `backdrop-filter: blur`. Or am I missing something?

4 days agoby elpocko

I'd be concerned about the maintenance overhead of this ~44-lines of code vs. just 1-line of code that has a similar (while slightly less realistic) net effect:

  filter: blur(16px);

4 days agoby alberth

I would suggest adding a Tailwind config too, seeing as it's so prevalent.

3 days agoby v5v3

It looks so much better with some texture!

4 days agoby suralind

Love it. Should be popular within new ios

4 days agoby xgpyc2qp

Used to make web background, the effect is good.

3 days agoby gvison

Looks good

Not a lot of web sites have made my Macbook M3 show signs of stress ;)

4 days agoby minaguib

Looks great without the backdrop-filter

4 days agoby ramoz

Amazing work!

4 days agoby arfaaan

I’m confused, but maybe two wrongs here do make a right. Please allow me to explain.

Putting aside for the moment that I personally find Apple’s iOS 26 design objectionable[1], I don’t understand why `backdrop-filter: blur` is the focus of recent implementations jumping on the Liquid Glass hype train.

Using background blur to create UI layer separation (often in combination with darkening/saturation or other contrast enhancements) has been around for over a decade on iOS and almost as long on the web. So what’s new here?

Adding to my confusion, I’m a bit surprised folks here think this is so challenging in CSS. A few commenters have pointed to great implementations elsewhere, but I think they’re underselling them.

Plainly: the solution that involves `backdrop-filter: filter(#filter)` where `#filter` references an inline SVG embedded with `<feImage/>` and `<feDisplacementMap/>` works very convincingly well.

Check out this demo for example:

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

This implementation choose to hard-code `<feImage href="data:image/png;base64,..."/>`. But if glass3d.dev chose to implement 3d highlights in a similar fashion (and wanted to support e.g. a dynamic `border-radius`) this image could easily be rendered in the browser runtime in canvas, and dumped into the CSS using `toDataURL()`. Similarly, a component library with a CSS pre-processor could generate these for any static shape at build-time.

The closest thing I’ve seen to this is:

https://ruri.design/glass

These implementations are out there.

Coming back to the why/should for a second though.

[1] In its current realization, Liquid Glass cannot effectively replace what blur accomplishes. Because Liquid Glass layers are more transparent, the contrast issues are real, and the spectral highlights distract the eye as much as (or more than) they help make up for that lack of contrast. It draws attention to the eye where blur would relax it. It’s a UI meant for an XR system (where it arguably solves a real problem, much like a HUD does in a video game) hacked into devices where it makes no sense, all in the name of a “unified OS” design language.

If any aspect of Liquid Glass is successful it will be when it’s used sparingly to delight in places that are low stakes and where other affordances are present (like a small circular button floating in the corner of the screen with hardware concentricity). A circle shape’s refractions would be smaller, softer, more symmetrical, and therefore arguably less noisy/distracting—in a way resembling a softer blurry background.

Which brings me full circle back to two wrongs.

This website doesn’t do anything new, but that’s why it’s good. Because the truth is, Apple failed to deliver a Siri-based LLM on a schedule it announced and is now trying to distract us with some shiny new thing. Damn, it worked.

4 days agoby adamschwartz

this is sexy gonna use it on my projects

3 days agoby anon115

Very nice

3 days agoby August7337

so good!

4 days agoby lovegrenoble

Nice! Now we can bring the awfulness of apple liquid glass to the web

4 days agoby voidUpdate