Agent Skills
› fengshao1227/ccg-workflow
› glassmorphism
glassmorphism
GitHub提供毛玻璃风格UI组件的CSS规范，涵盖透明、模糊、边框和阴影四大核心元素。包含卡片、导航栏等组件示例及Token引用，确保跨浏览器兼容性与无障碍访问。
Trigger Scenarios
需要实现毛玻璃或磨砂玻璃视觉效果
构建带有透明度和模糊效果的UI组件
Install
npx skills add fengshao1227/ccg-workflow --skill glassmorphism -g -y
SKILL.md
Frontmatter
{
"name": "glassmorphism",
"license": "MIT",
"description": "Glassmorphism design system skill. Use when building frosted-glass UI components with blur, transparency, and layered depth effects.",
"user-invocable": false,
"disable-model-invocation": false
}
Glassmorphism Design Spec
4 Core Elements
- Transparency — Semi-transparent backgrounds using
rgba()orhsla()with alpha0.05–0.4 - Blur —
backdrop-filter: blur()ranging 8–40px for frosted-glass effect - Border — Subtle semi-transparent borders (
1px solid rgba(255,255,255,0.18)) to define edges - Shadow — Soft layered
box-shadowfor depth separation from background
CSS Tokens
Reference: references/tokens.css
Use CSS custom properties from tokens.css for consistent theming:
@import 'references/tokens.css';
.glass-card {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: var(--glass-border);
border-radius: var(--glass-radius);
box-shadow: var(--glass-shadow);
}
Component Examples
Card
.glass-card {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: var(--glass-border);
border-radius: var(--glass-radius);
box-shadow: var(--glass-shadow);
padding: 1.5rem;
}
Navbar
.glass-nav {
background: var(--glass-bg-heavy);
backdrop-filter: var(--glass-blur-strong);
-webkit-backdrop-filter: var(--glass-blur-strong);
border-bottom: var(--glass-border);
box-shadow: var(--glass-shadow);
position: sticky;
top: 0;
z-index: 100;
}
Modal Overlay
.glass-modal-backdrop {
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
}
.glass-modal {
background: var(--glass-bg-heavy);
backdrop-filter: var(--glass-blur-strong);
-webkit-backdrop-filter: var(--glass-blur-strong);
border: var(--glass-border);
border-radius: var(--glass-radius-lg);
box-shadow: var(--glass-shadow-elevated);
}
Button
.glass-btn {
background: var(--glass-bg-light);
backdrop-filter: var(--glass-blur-light);
-webkit-backdrop-filter: var(--glass-blur-light);
border: var(--glass-border);
border-radius: var(--glass-radius);
transition: background 0.2s;
}
.glass-btn:hover {
background: var(--glass-bg);
}
Browser Compatibility
| Feature | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
backdrop-filter |
76+ | 103+ | 9+ (-webkit-) |
79+ |
rgba() backgrounds |
All | All | All | All |
- Always include
-webkit-backdrop-filterfor Safari support - Firefox <103: use
@supportsfallback with solid semi-transparent bg - Fallback pattern:
.glass-card {
background: rgba(255, 255, 255, 0.85); /* fallback */
}
@supports (backdrop-filter: blur(1px)) {
.glass-card {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
}
}
Accessibility Notes
- Ensure contrast ratio ≥ 4.5:1 for text over glass surfaces — test against all possible backgrounds
- Provide
prefers-reduced-transparencymedia query to disable blur/transparency for users who need it - Avoid placing critical text on highly transparent surfaces without a fallback
- Use
prefers-contrast: moreto increase border opacity and reduce transparency
@media (prefers-reduced-transparency: reduce) {
.glass-card {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: none;
}
}
@media (prefers-contrast: more) {
.glass-card {
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(0, 0, 0, 0.3);
}
}
Version History
- cc8cc34 Current 2026-08-20 06:33
