WWDC 2025 Liquid Glass Effect

[!NOTE] Demo here: https://codesandbox.io/p/sandbox/nn5q2y

A beautiful recreation of the macOS liquid glass effect using pure CSS and SVG filters. This demo showcases a button with a stunning glass morphism effect.

About the Liquid Effect

This glass effect was shown at Apple's WWDC 2025 as the "Liquid Effect". It adds smooth, flowing motion to interfaces using liquid-like distortions and light effects.

The effect combines animations and visual effects to create responsive interfaces. This demo shows how to create it using CSS and SVG filters, making it easy for web developers to use.

Key features that make this effect special:

• Organic, fluid motion that responds to user interaction
• Realistic light refraction and reflection
• Seamless integration using CSS and SVG filters

⛔️ Follow me on X

https://github.com/user-attachments/assets/60f6ef7a-05c2-4171-b7db-298d5f3eb9c6

https://github.com/user-attachments/assets/788a2233-0429-4141-bae8-2c5b7d63e448