About

Imported from telagod/pi-agent-colony (pi-package/skills/glassmorphism/SKILL.md). Install upstream with npx skills add telagod/pi-agent-colony --skill glassmorphism. Copyright stays with the author.

Glassmorphism Design Spec

Name: glassmorphism
Author: telagod

4 Core Elements

Transparency — Semi-transparent backgrounds using rgba() or hsla() with alpha 0.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-shadow for 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-filter for Safari support
Firefox <103: use @supports fallback 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-transparency media query to disable blur/transparency for users who need it
Avoid placing critical text on highly transparent surfaces without a fallback
Use prefers-contrast: more to 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);
  }
}

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/telagod-pi-agent-colony-glassmorphism/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

telagod-pi-agent-colony-glassmorphism.ocm.jsonjson

{
  "ocm": "1",
  "id": "telagod-pi-agent-colony-glassmorphism",
  "kind": "skill",
  "name": "glassmorphism",
  "description": "Glassmorphism design system skill. Use when building frosted-glass UI components with blur, transparency, and layered depth effects.",
  "publisher": "telagod",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "design",
      "css",
      "ui",
      "glassmorphism",
      "github"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Glassmorphism design system skill. Use when building frosted-glass UI components with blur, transparency, and layered depth effects."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "github",
      "repository": "https://github.com/telagod/pi-agent-colony",
      "path": "pi-package/skills/glassmorphism/SKILL.md",
      "ref": "e609f5d5c935079e36c88944252b168ff0907a27",
      "url": "https://github.com/telagod/pi-agent-colony/blob/e609f5d5c935079e36c88944252b168ff0907a27/pi-package/skills/glassmorphism/SKILL.md",
      "key": "telagod/pi-agent-colony/pi-package/skills/glassmorphism/SKILL.md"
    }
  },
  "instructions": "# Glassmorphism Design Spec\n\n## 4 Core Elements\n\n1. **Transparency** — Semi-transparent backgrounds using `rgba()` or `hsla()` with alpha `0.05–0.4`\n2. **Blur** — `backdrop-filter: blur()` ranging 8–40px for frosted-glass effect\n3. **Border** — Subtle semi-transparent borders (`1px solid rgba(255,255,255,0.18)`) to define edges\n4. **Shadow** — Soft layered `box-shadow` for depth separation from background\n\n## CSS Tokens\n\nReference: [references/tokens.css](references/tokens.css)\n\nUse CSS custom properties from `tokens.css` for consistent theming:\n\n```css\n@import 'references/tokens.css';\n\n.glass",
  "cost": {
    "context_tokens": 856
  }
}

Fetch it by URL: GET /api/v1/registry/telagod-pi-agent-colony-glassmorphism/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.