1实现原理 · 为什么它能做到
可信玻璃由四个成分合成（frost / translucency / edge of glass / depth），缺一就读成普通半透明盒子
skills/glassmorphism/SKILL.md
Glass is never one property. Every panel needs all four, or it reads as a plain translucent box:
四成分各配可抄 CSS（backdrop-filter blur 加 saturate、alpha 0.08–0.18、亮边 border、双层 box-shadow），并给轻 UI 8–12px 与重模态 24–40px 的档位。
利用 backdrop-filter 的作用域语义：它只模糊元素背后的内容，所以必须压在真实杂物或渐变背景上，纯色底等于没效果
skills/glassmorphism/SKILL.md
**`backdrop-filter` only blurs content that sits behind the element.** Over a flat background color it does nothing visible — glass needs a busy backdrop (image, gradient, video) to frost.
这条同时解释了验收条款：演示必须压在真实背景上，否则演示在撒谎。
细节工艺：亮边用 masked ::before 做单向受光（而非一条平 border），并用 feTurbulence 噪点 ::after 消除重模糊下的色带
skills/glassmorphism/SKILL.md
Draw a masked 1px ring with a lit corner via `::before`, and dither away gradient **banding**
噪点 opacity ≤ 0.06，属于看起来没做但实际做了的工艺层；references 给完整配方。
液态玻璃（2026 演进口径）用 SVG 滤镜做折射：动 feTurbulence 驱动 feDisplacementMap，叠在 backdrop-filter 霜面之上
skills/glassmorphism/SKILL.md
<feDisplacementMap in="SourceGraphic" in2="n" scale="22" xChannelSelector="R" yChannelSelector="G"/>
给 scale/baseFrequency/dur 三个旋钮的取值区间，并限定只用一块 hero 元素，不要铺网格（滤镜很贵）。
可访问性与性能是硬约束：prefers-reduced-transparency 退成实心面板、prefers-reduced-motion 停折射、无 backdrop-filter 走 @supports 兜底，且文字对比要 ≥4.5:1
skills/glassmorphism/SKILL.md
**Contrast over busy backgrounds**: translucent panels over photos can drop text below WCAG.
把玻璃是装饰、内容必须可读写成规则，并要求按背景最亮处核对对比度。
2核心能力
01基础玻璃面板（霜面加半透明填充加亮边加分层阴影，含浅/深两套档位）
02镜面受光边缘（masked ::before 单向亮边）与抗色带噪点（::after feTurbulence）
03玻璃质感动效（hover 加深霜面与亮边、面板抬升、@starting-style 入场、specular sweep）
04SVG 液态玻璃折射滤镜（feTurbulence 驱动 feDisplacementMap，带调参区间）
05三重降级：prefers-reduced-transparency / prefers-reduced-motion / @supports not(backdrop-filter)
06性能纪律（限制玻璃数量、避免嵌套 blur、限制半径与面积、及时撤 will-change）
07状态与时间双冻结 harness（?state=hover 与 ?t=N 同时冻结 CSS 动画与 SVG 折射）
08性能规则在 references 里量化（玻璃数量与滚动 FPS 的关系）
09零 build 交付（单 HTML 加内联 SVG 滤镜，明确不要 bundler）
10可访问性判据：reduced-transparency 退实心、reduced-motion 停折射、文字对比 ≥4.5:1
3外部依赖
| Kind | Dependency / Endpoint |
|---|---|
| api | CSS backdrop-filter（Safari 需 -webkit- 前缀）与 prefers-reduced-transparency |
| api | SVG 滤镜原语 feTurbulence / feDisplacementMap（含 SMIL animate 驱动 baseFrequency） |
| network | 无第三方库、无 CDN 依赖（纯 CSS 加内联 SVG；references 的噪点是 data: URI 内联，非网络请求） |
| cli | npx / Playwright（宿主侧截图工具；SKILL.md 在 verify 段示范） |
| cli | scripts/seek-shot.sh + scripts/contact-sheet.sh + ffmpeg（仓库根打包助手，被 Packaged helper 段点名） |
4管控建议与判定依据
建议配套管控措施
面向 Agent
限定工作目录
面向管理者
保留操作记录
判定依据（文件路径与关键语句摘要）
- 本地工作目录: 文件读写与工件输出: 本 skill 目录零写盘；交付物 1 个自包含 .html（背景图加玻璃面板加内联 SVG 滤镜），由 agent 写出
审计说明： 。判级只依据 skill 自身目录（skills/glassmorphism/ = SKILL.md + 0 字节 README.md + references/glass-recipes.md，find 全量核对）：零脚本、零凭证、零执行期外发（token 扫描 fetch(/XMLHttpRequest/curl/wget/child_process/process.env/API_KEY|TOKEN|SECRET/.env/eval( 零命中）、零写盘。全目录 URL 扫描只命中 references 里的 data:image/svg+xml 内联噪点与 iart.ai utm 推广链——前者不是网络请求，后者是 Markdown 链接文本，均非请求指令。交付页的背景图或字体若取自远端属产物期引用，不判级，仅在注意点列出。
5第二遍独立确认
- [ok] backdrop-filter 只能模糊身后内容这一关键前提是否自洽 — SKILL.md 核心段与 references 第 1 节都写明该语义，并据此推出演示必须压在真实杂物背景上；验收第 1 条与之对齐（glass overlaps a real busy backdrop, not a flat color）。
- [unlocatable] prefers-reduced-transparency 的可验证性（正文把它列为必过项） — SKILL.md 要求加载 reduced-transparency 并确认实心兜底可读，但给的建议含糊（Playwright --color-scheme-style flags, or a ?reduced=1 query）——Playwright 并无该媒体特性的专用开关，?reduced=1 需自行在页面实现。全文未给可用的确定性取证命令，故该验收项在源码内不可定位为可行步骤（对比 accessible-animation 用的是真实存在的 --reduced-motion=reduce）。
- [ok] 液态玻璃滤镜的性能告诫是否与实现一致 — 正文说明 filter（不是 backdrop-filter）作用于元素自身像素，需叠在霜面之上；references 第 5 节同样表述，并给 baseFrequency/scale/dur 的调参表与只用一块 hero 的限制，前后一致。
- [discrepancy] Packaged helper 的路径基准 — SKILL.md 写 scripts/seek-shot.sh anim.html 0 1.5 3，但 scripts/ 在仓库根而非本 skill 目录，单装形态下相对路径不成立。
6结论
适合： 适合：① 需要在图片、视频或渐变背景上做浮层、卡片、导航栏、模态与工具栏的界面；② 想复刻 Apple liquid glass 观感（折射加流动高光）的 hero 区；③ 需要把玻璃效果做成可降级（reduced-transparency/motion、无 backdrop-filter）的合规实现；④ 想拿一份可直接在浏览器打开、按状态与时间冻结取证的玻璃演示。
不适合： 不适合：① 背景是纯色或极简的界面（没有可模糊的内容，效果不成立）；② 大面积、多数元素都要玻璃化的信息密集型界面（性能与可读性双输）；③ 需要严格对比度保证的正文型页面（应改用实心面板）；④ 以低端设备为主的场景（折射滤镜开销大）。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload glassmorphism.tar.gz
sha256:
Option B · Copy Guide for Agent282f840f1bf8a217…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit b6dba3eb75.