Liquid Glass
Apple-inspired glassmorphism UI component with real-time blur and refraction effects.
Liquid Glass is a React component that recreates the depth and physicality of Apple's glassmorphism design language. It combines real-time backdrop blur, chromatic aberration, dynamic light refraction, and subtle noise textures to create UI surfaces that feel like they exist in physical space. The component is fully composable, theme-aware, and performant enough for production use.
React + CSS Glassmorphism
UI That Feels Physical.
A production-ready React component implementing Apple-grade glassmorphism with layered blur, refraction simulation, and dynamic lighting — all running at 60fps through GPU-accelerated CSS.
Project Overview
Depth, light, and material in the browser.
The challenge with glassmorphism is that most implementations look flat — a simple backdrop-filter blur with a white overlay. Liquid Glass goes further by simulating how real glass interacts with light. The component layers multiple effects: a variable backdrop blur that responds to scroll position, a chromatic aberration effect at the edges that simulates light refraction, a subtle animated noise texture for surface imperfection, and dynamic shadow casting based on a configurable light source direction. Everything is GPU-accelerated through careful use of CSS transforms, will-change hints, and composite layer promotion. The component accepts props for blur intensity, refraction strength, tint colour, and border radius, making it adaptable to any design system. It performs smoothly even on mobile Safari, which is notoriously strict about backdrop-filter performance.