Liquid Glass — Refraction, Optical Lens, Fluid Glass & iOS-style Glass UI + CSS Export

Liquid Glass brings the fluid, refractive Apple-style liquid-glass look to Figma. Turn any layer into a real optical lens that bends and magnifies whatever sits behind it — with a curved meniscus edge, chromatic-aberration fringing and a luminous caustic glow. Copy production-ready CSS plus a reusable SVG displacement filter and drop it straight into your build.

This is true refraction, not just a blur — the fluid-glass effect people search for from iOS 26 and Apple's design language.

✨ Features• Real refraction via an SVG displacement map — genuine bending, not a fake blur• Per-channel RGB split for realistic chromatic-aberration edges• Refraction blur & bezel depth controls• Specular meniscus lens rim toggle• Caustic glow — the luminous tinted light-ray shadow under the glass• Fluid transparency & frost controls• 6 presets — Water Drop, Aqua Marine, Prismatic Aurora, Mercury Chrome, Melting Ice, Golden Honey• One-click CSS + SVG export — copy the filter once, reuse it anywhere• Light & dark canvas generation that matches your active theme• 34-component UI library — cards, buttons, inputs, toggles, badges & more, with instant search🎯 Perfect forModern iOS-style interfaces, widgets, media controls, hero sections, lock-screen concepts and premium landing pages — anywhere you want that fluid, high-end glass feel.

⚠️ The refractive lens renders in Chromium browsers (Chrome, Edge, Brave). Safari & Firefox gracefully fall back to a vivid frosted glass — your design stays intact everywhere.

Tip: put sharp, colorful shapes behind the glass so the refraction is clearly visible — a plain background hides the effect.

Keywords: liquid glass, apple liquid glass, refraction, displacement map, chromatic aberration, optical lens, meniscus, caustic, fluid ui, frosted glass, glass morphism, ios 26 glass.