Home / All Skills / Design & Motion / glassmorphism
English (EN)简体中文 (ZH)日本語 (JA)
Design & Motion · iart-ai/web-animation-skills

glassmorphism

This skill should be used when the user asks to "add a glassmorphism effect", "frosted glass UI", "Apple liquid glass style", "frosted blur card", "translucent glass panel animation", "make a frosted nav bar", "build a glass modal/dialog", "animate a glass card on hover", or "add a refracting liquid-glass hero". Covers frosted translucent panels with backdrop-filter blur, edge/specular highlights, SVG liquid-glass refraction, motion on hover/scroll/enter, and accessible reduced-transparency fallbacks.

L2 Local · Restricted workspaceV1 Commit-PinnedWrite FileDual-pass Audit
Author iart-aiGitHub iart-ai/web-animation-skills ↗Stars 28License MIT（仓库根 LICENSE 为 MIT License, Copyright (c) 2026 iart.ai；.claude-plugin/plugin.json 的 license 字段同为 MIT）Commit b6dba3eb75
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Believable glass is synthesized from four components (frost / translucency / edge of glass / depth); missing any one causes it to be perceived as a mere semi-transparent box.

skills/glassmorphism/SKILL.md
Glass is never one property. Every panel needs all four, or it reads as a plain translucent box:
Provides ready-to-copy CSS for each of the four components (backdrop-filter blur with saturate, alpha 0.08–0.18, highlighted border edge, dual-layer box-shadow), along with presets for light UI (8–12px) and heavy modals (24–40px).

Leverage backdrop-filter's scoping semantics: it only blurs content behind the element, requiring it to sit on top of real visual clutter or gradient backgrounds; a solid background yields zero effect.

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.
This also explains the acceptance criteria: the demo must be placed over an authentic background, otherwise the demo is deceptive.

Detailed craftsmanship: use a masked ::before for unidirectional specular edge lighting (instead of a flat border), and feTurbulence noise via ::after to eliminate banding under heavy blur.

skills/glassmorphism/SKILL.md
Draw a masked 1px ring with a lit corner via `::before`, and dither away gradient **banding**
Noise opacity is kept at ≤ 0.06—a subtle craft layer that looks invisible but makes a critical difference; the complete formula is provided in references.

Liquid glass (2026 progressive standard) uses SVG filters for refraction: animated feTurbulence drives feDisplacementMap, layered on top of the frosted backdrop-filter surface.

skills/glassmorphism/SKILL.md
<feDisplacementMap in="SourceGraphic" in2="n" scale="22" xChannelSelector="R" yChannelSelector="G"/>
Provides parameter ranges for scale/baseFrequency/dur, and restricts usage to a single hero element rather than a grid (filters are computationally expensive).

Accessibility and performance are hard constraints: fallback to a solid panel under prefers-reduced-transparency, halt refraction under prefers-reduced-motion, provide an @supports fallback when backdrop-filter is unavailable, and ensure text contrast is ≥4.5:1.

skills/glassmorphism/SKILL.md
**Contrast over busy backgrounds**: translucent panels over photos can drop text below WCAG.
Codifies the rule that glass is decorative while content must remain legible, requiring contrast verification against the brightest area of the background.

2Core Capabilities

01Base glass panel (frosted surface, translucent fill, edge highlight, layered shadows, including light/dark presets)
02Specular edge lighting (masked ::before unidirectional highlight) and anti-banding noise (::after feTurbulence)
03Glass texture motion (hover enhancement of frost and edge highlights, panel elevation, @starting-style entrance, specular sweep)
04SVG liquid glass refraction filter (feTurbulence driving feDisplacementMap, with tuning parameter ranges)
05Triple fallback: prefers-reduced-transparency / prefers-reduced-motion / @supports not(backdrop-filter)
06Performance discipline (limiting glass element count, avoiding nested blurs, constraining radius and surface area, promptly removing will-change)
07State and time dual-freezing harness (?state=hover and ?t=N freezing CSS animations and SVG refractions simultaneously)
08Performance rules quantified in references (correlation between glass element count and scrolling FPS)
09Zero-build delivery (single HTML with inline SVG filter, explicitly avoiding bundlers)
10Accessibility criteria: solid fallback for reduced-transparency, stopped refraction for reduced-motion, text contrast ≥4.5:1

3External Dependencies

KindDependency / Endpoint
apiCSS backdrop-filter（Safari 需 -webkit- 前缀）与 prefers-reduced-transparency
apiSVG 滤镜原语 feTurbulence / feDisplacementMap（含 SMIL animate 驱动 baseFrequency）
network无第三方库、无 CDN 依赖（纯 CSS 加内联 SVG；references 的噪点是 data: URI 内联，非网络请求）
clinpx / Playwright（宿主侧截图工具；SKILL.md 在 verify 段示范）
cliscripts/seek-shot.sh + scripts/contact-sheet.sh + ffmpeg（仓库根打包助手，被 Packaged helper 段点名）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Restrict working directory
For Administrators
Retain operation logs
Evidence & Triggers (File Paths & Excerpts)
  • 本地工作目录: File I/O and artifact output: Zero disk writes within this skill directory; deliverables consist of 1 self-contained .html file (background image + glass panel + inline SVG filter) authored by the agent.
Audit Notes: Grading is determined solely by the skill's own directory (skills/glassmorphism/ = SKILL.md + 0-byte README.md + references/glass-recipes.md, verified via complete find inspection): zero scripts, zero credentials, zero runtime outbound requests (token scan for fetch(/XMLHttpRequest/curl/wget/child_process/process.env/API_KEY|TOKEN|SECRET/.env/eval( yielded zero matches), and zero disk writes. Directory-wide URL scanning matched only an inline data:image/svg+xml noise data URI in references and an iart.ai utm promotional link—the former is not a network request, and the latter is Markdown link text, neither being request instructions. External background images or web fonts referenced in the final delivered page represent artifact-stage citations and do not affect security grading; they are simply documented in the considerations.

5Second-Pass Verification

  • [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 目录，单装形态下相对路径不成立。

6Verdict & Scenarios

  • Breaks down glass into an actionable recipe of four components plus triple fallbacks, rather than vague atmospheric descriptions
  • Controls both visuals and legibility simultaneously: contrast ratio (≥4.5:1, measured against the background's brightest area) is incorporated into the acceptance checklist
  • Identifies specific performance pitfalls and provides alternatives (animating only transform/box-shadow/background, minimizing blur delta)
  • State and time dual-freezing harness covers both types of forensic inspection for glass (static/hover states alongside temporal frames of refraction and specular sweeps)
    • Best for: Suitable for: ① Interfaces requiring overlays, cards, navigation bars, modals, or toolbars over images, videos, or gradient backgrounds; ② Hero sections aiming to replicate the Apple liquid glass aesthetic (refraction plus fluid highlights); ③ Compliant implementations requiring graceful degradation (reduced-transparency/motion, absence of backdrop-filter); ④ Scenarios needing a browser-ready glass demo capable of state and time freezing for verification.
    Not for: Not suitable for: ① Interfaces with solid or minimalist plain backgrounds (no content to blur, rendering the effect ineffective); ② Information-dense interfaces requiring widespread glassmorphism across large areas or most elements (compromises both performance and legibility); ③ Body-text-heavy pages requiring strict contrast guarantees (solid panels should be used instead); ④ Scenarios primarily targeting low-end devices (refraction filters incur high rendering overhead).
    Install Agent-Ready
    ① Verified Mirror 2026-09-28
    Option A · Direct DownloadDownload glassmorphism.tar.gz
    sha256: 282f840f1bf8a217…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit b6dba3eb75.