An interactive iOS 26 style Liquid Glass effect built with SVG displacement maps and backdrop-filter. Drag the glass, tune the refraction and copy the code into your own project.

Controls

Glass Shape

Width 300 Height 200 Border Radius 60

Refraction

Glass Thickness 80 Bezel Width 60 Refractive Index 3.0 Scale Ratio 1.00

Appearance

Blur 0.3 Specular Opacity 0.50 Specular Saturation 4

Inner Shadow

Color Blur 20 Spread -5

Glass Tint

Tint Color Tint Opacity 6%

Outer Shadow

Blur 24

Background

This version uses SVG filters that only render in Chromium browsers (Chrome, Edge, Brave, Arc). In this browser the glass will look flat.

Open WebGL version

⚠ SVG backdrop-filter is Chrome / Chromium only Switch to WebGL → GitHub

Liquid Glass for the Web