# Liquid Glass JS

> WebGL library for glass effects inspired by Apple's Liquid Glass

- Category: UI components (`components`)
- Tags: `webgl`, `open-source`, `free`
- Official: https://github.com/dashersw/liquid-glass-js
- See also: https://dashersw.github.io/liquid-glass-js/
- Wunderlust: https://wunderlust.xyz/r/liquid-glass-js
- Image: https://wunderlust.xyz/media/liquid-glass-js-poster.jpg
- Video preview: https://wunderlust.xyz/media/liquid-glass-js.webm
- Added: 2026-11-07

## What it is

A JavaScript library using WebGL that recreates Apple's Liquid Glass effect on the web, with real-time refraction, blur and masking, in shapes such as rounded rectangles, circles and pills.

## What it’s for

For adding liquid glass components to web pages, on your own or driven by an agent such as Claude Code.

## Benefits

- Real-time refraction and blur
- Three shapes: rounded rectangle, circle and pill
- Live demo and MIT license

## Caveats

- The repository was picked by name; other liquid glass projects exist, so confirm the address before using it

## Similar on Wunderlust

- [Tiptap](https://wunderlust.xyz/r/tiptap.md): Open-source headless text editor framework for the web
- [Vanta.js](https://wunderlust.xyz/r/vanta-js.md): Animated WebGL backgrounds for websites in a few lines of code
- [React Glass UI](https://wunderlust.xyz/r/react-glass-ui.md): Visual generator of glass effects (glassmorphism) for React components
- [Liquid Logo](https://wunderlust.xyz/r/liquid-logo.md): Turns a logo into liquid metal with Paper Shaders
- [Three.js](https://wunderlust.xyz/r/three-js.md): JavaScript library for 3D graphics on the web
- [ProseMirror](https://wunderlust.xyz/r/prosemirror.md): Toolkit for building rich text editors on the web