{
  "id": 1030691,
  "title": "Most glassmorphism is blur + a white overlay. I extracted the actual refraction into a Claude Code skill",
  "url": "https://urgent.news/2026/08/15/most-glassmorphism-is-blur-a-white-overlay-i-extracted-the-actual",
  "topic": "finance",
  "section": "Finance & Markets",
  "published": "2026-08-15T12:18:21.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/stormaref/most-glassmorphism-is-blur-a-white-overlay-i-extracted-the-actual-refraction-into-a-claude-code-19b4"
  },
  "original_language": "en",
  "account": "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.",
  "summary": "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…",
  "key_points": [
    "Most glassmorphism designs use blurred backdrop with white overlay",
    "Refraction effect extracted into Claude Code skill",
    "LiquidGlassSkill installed via Plugin Marketplace"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}