This past week marked the start of WWDC25, Apple's yearly developer conference where they reveal new platforms, technologies, and (most relevant here) design languages. During the presentation they released their newest iteration, dubbed Liquid Glass. I have _a lot_ of thoughts on this new language, but my immediate thought while I was watching the presentation was "I wonder if CSS can do that". It turns out, yes, with great effort, it can.

Anja Petry

HTML

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

A detailed technical breakdown of recreating Apple's new Liquid Glass design language using CSS and SVG filters. The implementation involves multiple layers including specular highlights with box-shadow, backdrop blur and color filters, SVG displacement maps for refraction effects, and chromatic aberration simulation. The technique requires advanced CSS filter knowledge and has significant browser compatibility limitations, working primarily in Chrome with performance considerations for GPU usage.

Liquid Glass, but in CSS

kindly recheck your own css
<img src="https://media.daily.dev/image/upload/s--g76A9Nc7--/f_auto/v1751862043/ugc/content_be7ecf09-7be6-4c9e-bdc5-3be4eab22657?_a=BAMClqZW0" alt="image">
there is a bit of overlap issue

the effort is nice, but… the result sample is just that? it only shows the distortion of text inside the glass, all other things pointed in the article isn’t on the final example like chromatic aberration, edge distortion, etc…
Same day codepen replications of Glass UI is more near implementation than this article that was supposed to replicate the physics of glass.

Kind of pointless if it doesn’t work in Safari - #1 browser in the US and much of the western markets.

stay minimal fellas, sexy uis have the buggiest backends

Just one or two css rules, opacity and backdrop-filter: blue… simple, but cool.