deepika-builds/liquid-glass

liquid-glass recreates the Apple style translucent glass panel effect for websites. It makes an element look like a piece of glass that visibly bends the content behind it near its edges, with a faint rainbow fringe at the rim, while the text and content inside stay easy to read. The whole thing lives in one JavaScript file with no other packages to install, and it can be attached to any element on a page. The real bending effect only works in Chromium based browsers such as Chrome, Edge, Arc, and Brave. In Safari and Firefox, which do not support the underlying browser feature, the library automatically falls back to a simple frosted blur look instead, so the page still looks reasonable everywhere. Using it is a two step process. You load the script and give an element a class, then call a single function on that element to turn on the glass effect. The returned object tells you whether the real refraction is supported, lets you refresh the effect after you resize things by hand, and lets you turn the effect off and remove it. The actual glassy appearance, like the tint, shadow, and border, is written as normal CSS on the element itself, separate from the script's job of handling the underlying optical trick. Under the hood, the library draws a special image that encodes how light should bend, then feeds that into a browser SVG filter with several passes to create the color fringing at the edges. This is applied through a backdrop filter, meaning the real content behind the glass is what refracts, so text stays selectable and buttons stay clickable. The README notes some limits: the special color setting the module applies internally is required for the effect to look right, the interior should be kept legible by adjusting a few settings rather than making the background opaque, and the effect is best suited to smaller elements like cards, navigation bars, and buttons rather than very large areas of the page, since generating the effect is demanding on the browser. The project is released under the MIT license.