We got some comments on the last video we did on Apple's Liquid Glass effect so this time we are going all in!

View the project here: https://editor.nordcraft.com/projects/liquid_glass2/branches/main/components/HomePage

I borrowed a lot of the SVG filter from Lucas Romero Di Benedetto
https://bsky.app/profile/lucasromerodb.bsky.social

See his original Codepen here:
https://codepen.io/lucasromerodb/pen/vEOWpYM

Try Nordcraft here 👉 https://nordcraft.com/signup?utm_medium=youtube

🌎 Visit https://nordcraft.com
🦋 Follow https://bsky.app/profile/nordcraft.com
💬 Join https://discord.gg/nordcraft

What is Nordcraft? 🤷‍♀️

Nordcraft is the world’s first Web Development Engine. 

The Nordcraft Web Development Engine is visual tooling applied to a lean framework built on web standards. Think Unreal Engine, but for crafting impressive high-end web applications that delight your users. Plus, Nordcraft is open source. Choose to host your apps on Nordcraft’s platform, or self-host the lightweight 24kb runtime for complete control.

Feature highlights:
✨ Open-source
✨ Access to any database and API
✨ SSR out of the box
✨ Built-in Git-style branching and merging
✨ Export and embed web components
✨ Customise every single pixel
✨ Community packages

We use Nordcraft to build Nordcraft 🤯

Jacob Kofoed

Venture Capital

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

Demonstrates how to create Apple-inspired liquid glass effects with refraction using SVG filters combined with CSS. The technique involves using SVG filter elements like turbulence, Gaussian blur, displacement mapping, and specular lighting to achieve realistic glass distortion effects that bend and refract background content. While the effect requires SVG filters rather than pure CSS, it can be implemented by copying the provided filter code and applying it via CSS filter property.

Liquid Glass with refractions in CSS

<h1>Apple should copyright Windows Vista  default theme</h1>
<p><img src="https://media.daily.dev/image/upload/s--5p98-kdW--/f_auto/v1750422996/ugc/content_43b5c709-e608-44be-822d-bd19e87bc832?_a=BAMClqZW0" alt="image"></p>
