---
name: Liquid Glass JS
slug: liquid-glass-js
url: "https://dontmakeitugly.com/resources/liquid-glass-js"
website: "https://dashersw.github.io/liquid-glass-js/"
github: "https://github.com/dashersw/liquid-glass-js"
type: github-repository
categories:
  - components
  - motion
tags:
  - glass
  - liquid-glass
  - webgl
  - apple
  - refraction
  - vanilla
  - effects
frameworks:
  - vanilla
pricing: free
license: MIT
openSource: true
agentFriendly: excellent
agentAccessMethods:
  - github
  - documentation
  - copy_paste
difficulty: intermediate
dateAdded: "2026-09-03"
---

# Liquid Glass JS

Apple's Liquid Glass look on the web: real-time refraction, blur and masking in WebGL.

- Type: GitHub repository
- Categories: Components, Motion
- Pricing: Free · License: MIT
- Open source: yes
- Works with: Vanilla JS/CSS, WebGL, JavaScript

## What it is

Liquid Glass JS recreates the refractive glass effect from Apple's Liquid Glass design language for the browser. It renders buttons and containers in rounded, circular and pill shapes with real-time refraction, nested glass layers and adjustable tint. Plain JavaScript with WebGL; MIT licensed, with a live demo and full API reference in the README.

## Why it's here

Listed because it's the most faithful web recreation of the effect, not because you should cover a page in it. Glass on glass on glass is exactly the kind of thing this site's name warns about. One control, one moment, on a busy background where refraction has something to bend.

## Best for

- a single glass control or card
- Apple-style visual references
- studying refraction shaders

## Links

- Website: https://dashersw.github.io/liquid-glass-js/
- GitHub: https://github.com/dashersw/liquid-glass-js

## Can my agent use this?

Yes. The README is the documentation and includes quick-start code and an API reference. Ask your agent to use it for one element and to provide a non-WebGL fallback.

Agent friendliness: Excellent. Public docs, public source or an installable package. An agent can read, install and implement this directly.
Access methods: GitHub, Docs, Copy/paste.

## Prompt to hand your agent

```text
Use Liquid Glass JS as a design and implementation reference for this project.

What it is: Apple's Liquid Glass look on the web: real-time refraction, blur and masking in WebGL.

Website: https://dashersw.github.io/liquid-glass-js/
GitHub: https://github.com/dashersw/liquid-glass-js

Use it specifically for:
- a single glass control or card
- Apple-style visual references
- studying refraction shaders

How you can access it: GitHub, Docs, Copy/paste.
Works with: Vanilla JS/CSS.
License: MIT. Respect it.

Study the relevant design and implementation patterns, but adapt them to this project's existing architecture, visual language, accessibility requirements and conventions. Do not blindly copy the entire resource.
```

## Related

- [Liquid Logo](https://dontmakeitugly.com/resources/liquid-logo.md): Drop in your logo and get it back as flowing liquid metal, rendered live with shaders.
- [ShaderGradient](https://dontmakeitugly.com/resources/shadergradient.md): Slow-moving 3D gradients for React, Framer and Figma that look like expensive motion design.
- [Aceternity UI](https://dontmakeitugly.com/resources/aceternity-ui.md): Showy, copy-paste React components for landing pages that need a moment.
- [Magic UI](https://dontmakeitugly.com/resources/magic-ui.md): Animated React components and effects for landing pages, built to sit alongside shadcn/ui.

## In collections

- [Beautiful open-source React components](https://dontmakeitugly.com/collections/beautiful-open-source-components.md)

Liquid Glass JS is an independent resource listed by Don't Make It Ugly. We link to it; we aren't affiliated with it. Pricing and licence details are as understood at the time of listing; check the official site.