liquid-glass

Installation
SKILL.md

Liquid Glass

Apple's Liquid Glass (iOS 26 / macOS 26) goes beyond simple backdrop-filter: blur(). It uses SVG feDisplacementMap to simulate light refraction through curved glass. Background content physically warps at the element's edges, as if viewed through real glass.

What makes it different from glassmorphism

Glassmorphism = frosted blur only. Liquid Glass = frosted blur + edge refraction (background warps near borders). The technique is backdrop-filter: url(#svg-filter) — Chrome/Chromium only for the full effect; Firefox/Safari gracefully degrade to blur.

Four-layer composition

Every Liquid Glass element stacks four layers:

Installs
29
GitHub Stars
2
First Seen
Apr 9, 2026
liquid-glass — zettersten/skills