[HN Gopher] Show HN: CSS generator for a high-def glass effect
___________________________________________________________________
Show HN: CSS generator for a high-def glass effect
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.
Author : kris-kay
Score : 171 points
Date : 2025-07-02 15:51 UTC (7 hours ago)
(HTM) web link (glass3d.dev)
(TXT) w3m dump (glass3d.dev)
| mbforbes wrote:
| 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.
| kris-kay wrote:
| Yes, same! I didn't expect it to need so many tricks to
| implement. Your intuition is correct, the most resource-
| intensive part is the blur bit of the backdrop-filter. The
| higher the blur value, the more neighbouring pixels need to be
| "consulted" before rendering. Another resource-intensive aspect
| is continuous repaint as you scroll or as a video background
| changes the look of the glass.
| chrismorgan wrote:
| 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.
| kris-kay wrote:
| I did read Josh's great article and had a go at implementing
| the tutorials. Unfortunately, I ran into some issues with the
| border-radius via SVG mask bit. It worked great on a hardcoded
| element, but I still need to figure out how to make it work
| across a whole component library where the border-radius
| changes based on the user's branding and container-queries.
| thecosas wrote:
| I can see people using this to have their websites (or apps) fit
| into the design of Apple's OS 26 design language. Neat!
| CharlesW wrote:
| FWIW, this looks nothing like the iOS 26 (which I've been using
| on my primary phone) Liquid Glass effects.
| kris-kay wrote:
| True, but it wasn't meant to. I installed the 2nd beta on my
| phone as well and like it so far.
| kris-kay wrote:
| Thanks, I hope it can be useful for people, especially when I
| make the library public.
| jauntywundrkind wrote:
| 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
| jasonthorsness wrote:
| I think this is a clever moat Apple created with Liquid Glass:
| they picked an effect that is easy to make a worse version of,
| but very hard to do the real/right way (and humans have an
| intuition for real/right because they see real glass every
| day). So any copycats will look worse in a way that's pretty
| obvious and Apple gets to keep the "premium-looking" product.
| gumby271 wrote:
| I think the same is true for when they started using blurs
| everywhere. They knew Android OEMs would copy it in a worse
| way and shoot themselves in the foot. That's also why
| material design doesn't rely on blur effects, it needs to run
| well on much worse hardware.
|
| It's fun seeing the attempts to mimic Liquid Glass though,
| the most impressive so far is this Flutter package:
| https://pub.dev/packages/liquid_glass_renderer
| kris-kay wrote:
| That is a very impressive attempt at Liquid Glass! The
| whole cross-browser and cross-platform bit is still a
| challenge sadly - "Only works on Impeller, so Web, Windows,
| and Linux are entirely unsupported for now"
| silvestrov wrote:
| I think you overestimate how much most users are able to
| detect such differences and will care about it.
|
| Somewhat like the blind tasting tests of Coca Cola versus
| Pepsi versus supermarket brands.
| _benton wrote:
| I don't think it's that hard for someone with experience
| writing shaders to emulate. The moat is that it's almost
| impossible to replicate with browser technology, which hurts
| web-based ui systems and is still a big challenge with
| something like flutter or jetpack compose multiplatform.
|
| Stuff like React Native get it basically for free because
| their ui is still technically "native".
|
| But apps that rely on web views are screwed and I'm sure
| Apple will be happy to push devs away from those solutions as
| they're inferior for users.
|
| Now they just need to figure out a way to push RN apps
| towards true native.
| kris-kay wrote:
| I fully agree that Liquid Glass is almost impossible to
| replicate with browser technology without using 3D shaders.
| But I'm curious to know your opinion about why apps that
| rely on web views are inferior for users (apart from the
| above reason). I certainly think Apple thinks they are
| inferior, but I'm not sure how devs and users feel about
| it.
| kris-kay wrote:
| The moat is real! I haven't tried recreating Liquid Glass in
| the browser yet. From what I've seen, it's possible, but not
| in a practical, cross-browser, "can be applied to an
| arbitrary component" kind of way.
|
| Of course, as soon as we figure out how to get it done, Apple
| will move on to the next thing. I'm okay with that though. It
| was a bold move, and I can't imagine how much time and money
| Apple spent making Liquid Glass look that good.
| dotancohen wrote:
| I recently saw a large gold (plated) surface - larger than a
| hand. The effect the light played off of that metal was
| amazing, I've never seen the effect in small gold jewelry.
| Photographs and video just don't capture it. If Apple ever
| turns their attention to gold and manages to nail that
| effect, I would consider one of their devices just for that
| aspect.
| altairprime wrote:
| I think the other component of the moat is that their OS/GPU
| stack is power-optimized for this effect in hardware, which
| generic solutions for generic hardware will have trouble
| matching - even a lower fidelity replication's power drain
| could be an order of magnitude higher as a result.
| kris-kay wrote:
| I agree that Liquid Glass's edge distortion looks great, and I
| will try my hand at recreating it eventually. For the current
| project, I aimed to create a material that looked polished,
| worked consistently across browsers, and didn't use real 3D.
| And you're right about the effect being more visible when
| moving over a fixed background. The demo site I'm working on
| for the library does this, it's just not ready yet.
|
| Thanks for sharing the resources!
| tempodox wrote:
| Wow, that Video tab looks gorgeous. I still don't understand yet
| how it's actually done.
| kris-kay wrote:
| Thanks! Do you mean how the glass or how the video background
| is done?
| tempodox wrote:
| The background.
| kris-kay wrote:
| So you need a video HTML tag with all of these attributes:
| <video autoplay muted loop webkit-playsinline playsinline
| sizes="100vw">
|
| and the CSS: .bg-video { position: fixed; z-index: -1;
| inset: 0; width: 100%; (don't set this to 100vw or you will
| have scrollbar issues) height: 100%; min-height: 100vh;
| object-fit: cover; object-position: center; pointer-events:
| none; }
|
| The part I still need to do myself is provide multiple
| video sizes and show the one that's most suitable for the
| viewport.
| elpocko wrote:
| 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?
| rpastuszak wrote:
| You're not looking far back enough:) I see it more as a new
| Aqua from OSX Cheetah (2000 CE)
|
| This is a slight tangent, but 20 years ago I had a nightmare in
| which I got hit by a tram, died and travelled in time into a
| world where every computer was running Windows Vista. In other
| words, fair enough, you might be onto something here after all.
| elpocko wrote:
| >Aqua from OSX Cheetah
|
| I've never used OSX, but I would guess from screenshots that
| it didn't do dynamic layered gaussian blur of large screen
| regions in realtime, which would've been too much for the
| hardware of the year 2000.
| rpastuszak wrote:
| That is true, but don't forget water is the essence of
| moisture.
|
| Also, those scrollbars were quite impressive for their
| time.
| kris-kay wrote:
| The 2000 CE bit made me laugh! And yes, Windows Vista was a
| proper nightmare.
| kris-kay wrote:
| You're right, glassmorphism dates back to the early years of
| this millennium. For instance, Project Looking Glass(2003)
| attempted an entire desktop environment that resembled slabs of
| glass that could be turned over in 3D space!
|
| Even so, I haven't found another glass generator that has a
| texture layer and box-shadow bevel, etc.
| magic_hamster wrote:
| 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.
| ivape wrote:
| If it can't be done with CSS, then how can it be done? How can
| you apply GPU shader effects to a common div? If we can't apply
| GPU effects to basic HTML and need to do so on custom things
| like an arbitrary Canvas concoction, then we may as well
| rebuild a brand-new rendering engine that can apply GPU
| effects.
|
| HTML is dead. I see no reason to care about it because we only
| need <p> tags to get some text across, as just about
| _everything_ else is used to make a webpage an ad-bomb. So let
| 's just start again with the <p> tag and better gpu
| integration, and leave everything else out.
| madeofpalk wrote:
| > we may as well rebuild a brand-new rendering engine that
| can apply GPU effects.
|
| They've been trying, with various degrees of success, over
| the past 10 years with Houdini.
|
| https://developer.mozilla.org/en-
| US/docs/Web/CSS/CSS_propert...
| swyx wrote:
| 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); } ```
| kris-kay wrote:
| Nice! Spark Joy looks like an awesome resource.
| leptons wrote:
| Searched for an ASCII Font generator, but didn't see one.
| Here's one tool I use:
|
| https://patorjk.com/software/taag/#p=testall&f=Graffiti&t=He...
| swyx wrote:
| added!
| minaguib wrote:
| Looks good
|
| Not a lot of web sites have made my Macbook M3 show signs of
| stress ;)
| kris-kay wrote:
| haha thanks!
| jand wrote:
| 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?
| victorbjorklund wrote:
| If you got to the site hosting the image it says:
|
| /* This is mostly intended for prototyping; please download the
| pattern and re-host for production environments. Thank you! */
| kris-kay wrote:
| Yes, thank you for answering. The textures are free to use,
| but the URL should only be used for prototyping. Here is the
| website: https://www.transparenttextures.com/
| refulgentis wrote:
| 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)
| its-summertime wrote:
| It's meant to mimic frosted glass, not Apple's liquid glass
| design.
| kris-kay wrote:
| Yes thank you
| kris-kay wrote:
| I mean you are right...but I still want to make the nicest
| thing I can make for the web.
| armchairhacker wrote:
| 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).
| kris-kay wrote:
| Good catch! It's not a fading-in issue; the shadow is just
| scrolling out of view. I designed those "overhang" box-shadows
| to be applied to the inside of an element rather than cast down
| from one. I see now that I need to apply the latter kind in
| this case. Thanks for letting me know!
| alberth wrote:
| 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);
| andrewingram wrote:
| I'm curious why. I'd have concerns about the performance of
| this effect, but 44 lines of CSS to achieve a higher level of
| polish and, dare I say, craft, doesn't seem like something to
| be dismissive of at review stage.
| alberth wrote:
| The OP uses this same blur + a lot more effect (to make it
| look more realistic).
|
| So it'd actually be the OP CSS that would perform worse than
| this single line.
| kris-kay wrote:
| Thanks for stating my side of this trade-off and for the nice
| feedback!
| ivape wrote:
| I have AI that can do just about everything for me, but I still
| need to make this tradeoff with CSS in 2025?
| ramoz wrote:
| Looks great without the backdrop-filter
| mikedelfino wrote:
| 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?
| xgpyc2qp wrote:
| On my M4 128 Gb ram works fine
| jdiff wrote:
| I would imagine a great many things work fine on any M4 that
| don't work fine on a great many phones and other devices.
| kris-kay wrote:
| Interesting, no there are no scroll effects anywhere on the
| page. Would you mind sharing what device, browser, and level of
| internet connection you're using?
| xgpyc2qp wrote:
| Love it. Should be popular within new ios
| kris-kay wrote:
| Thanks!
| utopcell wrote:
| > This project is the result of months of experimenting [..]
|
| It shows, this is awesome, especially that rice paper effect!
| kris-kay wrote:
| Thank you!
___________________________________________________________________
(page generated 2025-07-02 23:00 UTC)