{"slug": "most-glassmorphism-is-blur-a-white-overlay-i-extracted-the-actual-refraction-a", "title": "Most glassmorphism is blur + a white overlay. I extracted the actual refraction into a Claude Code skill", "summary": "A developer has released LiquidGlassSkill, a Claude Code plugin that implements realistic glassmorphism with actual refraction instead of the standard blur-plus-overlay effect. The technique uses a displacement map and SVG filters to bend the backdrop, and the plugin is available on GitHub for Angular production use.", "body_md": "Every glassmorphism snippet I've seen is `backdrop-filter: blur()`\n\nplus 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.\n\nBuilt it for a production Angular app, pulled it out as a Claude Code plugin: [https://github.com/stormaref/LiquidGlassSkill](https://github.com/stormaref/LiquidGlassSkill)\n\n```\n/plugin marketplace add stormaref/LiquidGlassSkill\n/plugin install liquid-glass@stormaref-skills\n```\n\n**The refraction:** bake a displacement map into a canvas, wire up `feImage → feDisplacementMap → feGaussianBlur`\n\n, point the element at it with `backdrop-filter: url(#filter)`\n\n. Since it's a *backdrop* filter, the input is the live page behind the element — so it tracks scroll, theme and content changes with nothing to invalidate. Field ported from [liquid-glass-js](https://github.com/dashersw/liquid-glass-js) (MIT, credited), minus its html2canvas snapshot.\n\n**Why it's a skill and not a gist** — four rules, each of which fails as plausible-looking output:\n\n`backdrop-filter: url(#…)`\n\nand paints nothing, so `@supports`\n\nsays yes and your panel is blank. Gate on engine.The CSS is 200 lines. Knowing that #1 is why your glass looks nths of things looking subtly wrong.\n\nMIT. Happy to talk displacement math — the `128/255 ≠ 0.5`\n\ndecly long to find.", "url": "https://wpnews.pro/news/most-glassmorphism-is-blur-a-white-overlay-i-extracted-the-actual-refraction-a", "canonical_source": "https://dev.to/stormaref/most-glassmorphism-is-blur-a-white-overlay-i-extracted-the-actual-refraction-into-a-claude-code-19b4", "published_at": "2026-08-15 12:18:21+00:00", "updated_at": "2026-08-15 12:42:31.313782+00:00", "lang": "en", "topics": ["developer-tools", "generative-ai"], "entities": ["Claude Code", "LiquidGlassSkill", "GitHub", "Angular", "liquid-glass-js"], "alternates": {"html": "https://wpnews.pro/news/most-glassmorphism-is-blur-a-white-overlay-i-extracted-the-actual-refraction-a", "markdown": "https://wpnews.pro/news/most-glassmorphism-is-blur-a-white-overlay-i-extracted-the-actual-refraction-a.md", "text": "https://wpnews.pro/news/most-glassmorphism-is-blur-a-white-overlay-i-extracted-the-actual-refraction-a.txt", "jsonld": "https://wpnews.pro/news/most-glassmorphism-is-blur-a-white-overlay-i-extracted-the-actual-refraction-a.jsonld"}}