Skip to content
don’t make it ugly
All resources

GitHub repositoryComponents, Motion

Liquid Glass JS

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

Open sourceFree
Visit website (opens in a new tab)View GitHub (opens in a new tab)
Preview of Liquid Glass JS

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

Can my agent use this?

Agent excellent agent friendliness

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.

Excellent: Public docs, public source or an installable package. An agent can read, install and implement this directly.

Access methods

  • GitHub
  • Docs
  • Copy/paste

Related resources

  • Liquid Logo
    Preview of Liquid Logo

    Liquid Logo

    Drop in your logo and get it back as flowing liquid metal, rendered live with shaders.

    good agent friendlinessToolFreeStaff pick
  • ShaderGradient
    Preview of ShaderGradient

    ShaderGradient

    Slow-moving 3D gradients for React, Framer and Figma that look like expensive motion design.

    excellent agent friendlinessPackageFreeOpen source
  • Aceternity UI
    Preview of Aceternity UI

    Aceternity UI

    Showy, copy-paste React components for landing pages that need a moment.

    good agent friendlinessComponent library
  • Magic UI
    Preview of Magic UI

    Magic UI

    Animated React components and effects for landing pages, built to sit alongside shadcn/ui.

    excellent agent friendlinessComponent libraryOpen source