Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

Glassmorphism Design Spec — measured AI agent skill | DecimalAI

fengshao1227/glassmorphism

SkillScore82Maintained

Glassmorphism design system skill. Use when building frosted-glass UI components with blur, transparency, and layered depth effects.

by fengshao1227

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

decimalai skills pull fengshao1227-glassmorphism

Get this skill — curl · raw file

curl -fsSL https://app.decimal.ai/s/fengshao1227-glassmorphism/SKILL.md

Raw file: /s/fengshao1227-glassmorphism/SKILL.md ↗ · machine-readable summary at /s/fengshao1227-glassmorphism.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 5h ago

Yes — +27% lift · at higher cost+35% tokens0% turns82% of whole cases pass with skill (18/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-02	✗→✓	▲ Improved	2%	0%
case-09	✗→✓	▲ Improved	20%	0%
case-17	✗→✓	▲ Improved	2%	0%
case-19	✗→✓	▲ Improved	10%	0%
case-20	✗→✓	▲ Improved	-2%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

fengshao1227 / ccg-workflow

templates/skills/domains/frontend-design/glassmorphism/SKILL.md

View on GitHub ↗

License MITImported 8/3/2026Version v1Bundled 1 file

Skill contents

references/

SKILL.md

Glassmorphism Design Spec

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:

css
@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

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);
  padding: 1.5rem;
}

Navbar

css
.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

css
.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

css
.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:

css
.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

css
@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);
  }
}

Want to see if fengshao1227/glassmorphism would activate on your phrasing? Try it before you install — no LLM call, no signup.

Other measured skills in the registry, with their headline benchmark lift.