Liquid Glass Generator — Recreate Apple's Liquid Glass UI with WebGL (Free)

Drag on the preview to move the glass

Upload image

Shape

Button<br>Card<br>Pill<br>Circle

Text

Font size

Refraction

Frosted blur

Edge specular

Chromatic aberration

Edge thickness

Corner radius

Tint

Opacity

Generated code

Copy code

※ Replace the background URL with your own image. It's a self-contained snippet that loads the lightweight ogl library from a CDN.

The Liquid Glass Generator recreates Apple's Liquid Glass with real refraction rendered in WebGL — not just a CSS blur — and exports copy-paste code. Place a glass button or card over a background image and tune refraction, chromatic aberration, frosted blur, and specular with sliders. Free, no signup, no watermark.

What is Liquid Glass?

Liquid Glass is the translucent glass material Apple introduced in 2025 across iOS 26, macOS Tahoe, and more. It refracts the background like a lens , adds a specular highlight and subtle chromatic aberration along the edge, and applies a frosted blur .

WebGL vs. CSS liquid glass

Most liquid glass generators use a CSS approach with backdrop-filter and SVG filters. It's convenient, but it cannot truly refract the background — you get a flat frosted panel with a highlight. This tool re-samples the background pixels with WebGL (GLSL shaders), so the edge lens distortion and chromatic aberration look closer to the real material.

Aspect<br>CSS approach (typical tools)<br>WebGL approach (this tool)

Background refraction<br>No (flat blur only)<br>Yes (lens-like distortion)

Chromatic aberration<br>Faked<br>Real RGB shift

Follows page background<br>Yes<br>Bakes the background image

Output<br>CSS / HTML<br>Self-contained WebGL snippet

How to use it (3 steps)

Pick a shape (button / card / pill / circle) and a background image.

Adjust refraction, blur, specular, chromatic aberration, and tint, and add button text if you want.

Click "Copy code" to get a self-contained WebGL snippet, then replace the background URL with your own image.

Great for

Glass-style CTA buttons in hero sections

Glass cards or pricing cards over an image

iOS 26-style glass UI mockups

Accents on portfolios and landing pages

How it works & caveats

The background image is drawn to a canvas, and only the rounded-rect glass area is composited with refraction, chromatic aberration, blur, and specular in the shader.

The exported code bakes the background image into the canvas . It does not follow arbitrary page content behind it — it's best for spots where the background image is fixed, such as heroes and cards.

Refraction and chromatic aberration render in WebGL-capable browsers (Chrome / Safari / Edge).

Frequently asked questions

Is this Liquid Glass generator free?

Yes. It's completely free, with no signup and no watermark. The generated code is yours to use commercially.

How is this different from CSS liquid glass generators?

Most tools use backdrop-filter and SVG filters, which cannot truly refract the background. This tool re-samples the background pixels with WebGL (GLSL shaders), so you get real lens-like refraction and edge chromatic aberration that look closer to the real material.

Does the effect follow the page background?

No. The exported code bakes the background image into the canvas, so it does not follow arbitrary page content behind it. It's best for spots where the background image is fixed, such as heroes and cards.

Which browsers are supported?

Refraction and chromatic aberration render in WebGL-capable browsers such as Chrome, Safari, and Edge.

Can I use the generated code commercially?

Yes. The generated code is yours. Just replace the background image URL with an image you have the rights to use.

What is Apple's Liquid Glass?

It's the translucent glass material Apple introduced in 2025 across iOS 26, macOS Tahoe, and more. It refracts the background, adds a specular highlight and chromatic aberration along the edge, and applies a frosted blur.