Liquid Glass (Advanced)
iOS 26-style liquid glass components — the glass material is on the actual interactive element, not a wrapper.
Overview
These components apply true physics-based glass refraction directly to the interactive UI element (button surface, slider thumb, toggle thumb, tab indicator, etc.) — not to a card around it. Two engines, ported from archisvaze/liquid-glass:
| Engine | Technique | Browser support |
|---|---|---|
| SVG | feDisplacementMap + backdrop-filter: url(#filter) | Chromium only |
| WebGL | GLSL fragment shader | All modern browsers |
Each example shows both engines side by side.
Primary Button
A pill-shaped button — the entire button surface IS the glass.
SVG
Continue
WebGL
Icon Button
A small circular icon button — actual button-sized.
SVG
WebGL
Segmented Tabs
The active tab indicator IS the liquid glass pill — sliding behind the labels (just like UISegmentedControl).
SVG
WebGL
Slider
The slider thumb is the glass element — like Apple's volume slider in Control Center.
SVG
WebGL
Toggle Switch
The toggle thumb IS the glass — a tiny refractive disc that slides across a colored track.
SVG
WebGL
Search Pill
The search field itself is a small glass pill.
SVG
WebGL
Status Pills
Tiny live-status badges — actual badge size.
SVG
WebGL
Floating Action Bar
A tight cluster of glass icon buttons, like the iOS Camera shutter row.
SVG
WebGL
Volume Knob
A round draggable knob — for stereo / EQ apps.
SVG
WebGL
Floating Tab Bar
iOS-style bottom tab bar — the active tab pill is glass, the bar itself is a translucent surface.
SVG
WebGL
Notification Pill
A compact island-style notification banner (Dynamic Island feel).
SVG
WebGL
Design Principles
The trick to convincing liquid glass UI is scope — apply the glass only to the part that should look refractive:
| Component | Glass element | Non-glass element |
|---|---|---|
| Button | Whole button surface | — |
| Icon button | Whole circle | — |
| Slider | Thumb only | Track |
| Toggle | Thumb only | Colored track |
| Segmented tabs | Active indicator only | Container background |
| Floating tab bar | Active tab pill only | Bar background |
| Search pill | Whole pill | — |
| Notification pill | Whole pill | — |
| Volume knob | Whole knob | — |
Wrap your interactive shape in LiquidGlassSVG / LiquidGlassWebGL at the exact size of the interactive shape — never inflate it into a card unless the component IS a card.
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
width / height | number | 280 / 160 | Glass size in pixels |
radius | number | 48 | Border radius |
glassThickness | number | 80 | Refraction magnitude |
bezelWidth | number | 40 | Width of refractive edge |
refractiveIndex | number | 1.5 | IOR (1.0 = none, 3.0 = extreme) |
tintOpacity | number | 0.06 | Tint strength |
backgroundUrl | string (WebGL only) | — | Background image for the shader |
Best Practices
- Match the size to the actual UI element — a button is 36-44px tall, a slider thumb is 24-28px, an icon button is 36-40px
- Use
bezel ≈ height/3as a starting point — gives a believable refraction profile at any size - Use
radius = height/2for fully round / pill shapes - Glass on the moving / interactive part only — let the static parts be normal CSS
- WebGL for cross-browser — Firefox and Safari don't support the SVG variant