Liquid Glass: The iOS Effect, Explained
Recreating Apple's Liquid Glass with shaders — the math behind distortion and chromatic aberration.
Summary
Apple's Liquid Glass looks like magic, but it's really a small stack of well-chosen math: a refraction-style distortion field, edge-aware highlights, and a touch of chromatic aberration. This preview breaks down how the effect is composed and how to recreate it in a fragment shader.
Apple’s Liquid Glass feels alive — light bends through it, colors fringe at the edges, and highlights slide as the surface moves. This article pulls the effect apart into its mathematical ingredients and rebuilds it, one shader pass at a time.
Interactive demo
Key ideas
- 01 Liquid Glass is a layered effect — distortion, highlight and dispersion — not a single filter.
- 02 A distortion field bends the background sample coordinates to fake refraction through glass.
- 03 Chromatic aberration splits the RGB channels by slightly different offsets near the edges.
- 04 Edge falloff and specular highlights are what sell the 'liquid' feel.
Keep reading
Moving Dots: Animating Points in OpenGL ES
From a single static point to motion — the next step in the OpenGL ES journey.
Read preview
Getting Started with OpenGL ES in Android
Wiring shaders into a real Android app — from GLSurfaceView to your first frame.
Read preview
OpenGL ES on Android: The Journey Begins
The opening chapter of a hands-on series on graphics programming for Android.
Read preview