What is liquid-glass-element?

Liquid Glass Element turns any HTML element into an Apple style frosted glass panel, using a mix of WebGL and CSS. It combines two layers: the browser's native backdrop filter for the soft frosted blur, and a WebGL canvas underneath that draws the 3D edge bevel, light reflections, and glowing highlights. Together these give a glass panel that looks like it bends and reflects light in a physically believable way, while still running smoothly in the browser. There is no build step and no dependencies to install. You clone the repository and open the preview file directly in a modern browser like Chrome, Edge, Firefox, or Safari, or run a small local server with npx serve for best results. The demo panel can be dragged around the page, resized from any edge or corner, and its blur strength adjusted with a slider, so you can see the effect change in real time. Beyond the demo, the project can also be installed as a skill for AI coding agents such as Claude Code, Codex, Antigravity, and OpenCode. Once installed, you can ask the agent to apply the Liquid Glass effect to an element on your own page, such as a signup form, and it will add the necessary WebGL canvas, shader code, and CSS styling automatically, along with optional dragging, resizing, and blur controls. The visual parameters, like blur amount, corner radius, refraction strength, and highlight sharpness, are exposed as CSS custom properties and shader settings so they can be tuned to fit a project's design. The README also documents the underlying optical math, covering the signed distance field shapes, Gaussian falloff, and lighting calculations used to render the glass. The project is released under the MIT license, so it is free to use in personal or commercial projects.