Most glassmorphism is blur + a white overlay. I extracted the actual refraction into a Claude Code skill
Every glassmorphism snippet I've seen is backdrop-filter: blur() plus a white overlay. That's a blurred rectangle. Real glass bends what's behind it, hardest at the edge — and that part is missing everywhere. Built it for a production Angular app, pulled it out as a Claude Code plugin: https://github.com/stormaref/LiquidGlassSkill /plugin marketplace add stormaref/LiquidGlassSkill /plugin install…
The wire material reports that most glassmorphism designs consist of a blurred backdrop with a white overlay. However, the author extracted the actual refraction effect into a Claude Code skill. The refraction is achieved by creating a displacement map and applying it to the element using feImage, feDisplacementMap, and feGaussianBlur filters.
Since the effect is applied as a backdrop filter, it tracks scroll, theme, and content changes automatically without requiring invalidation. The author ported the implementation from liquid-glass-js, an MIT-licensed project, removing its html2canvas snapshot. The skill is called "LiquidGlassSkill" and can be installed via the Plugin Marketplace.
Four rules were established, but each of them fails as a plausible output for the glassmorphism effect. The author explains that glass requires a backdrop, the tint should be colorless, children of a glass panel must paint a surface, and it cannot be feature-queried. Safari does not support the backdrop-filter with a URL, resulting in a blank panel when using @supports.
The CSS required to implement the effect is around 200 lines, which is why the glass looks less impressive than it could be. The project is licensed under MIT.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
