glassmorphism

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

Quality

78%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./templates/skills/domains/frontend-design/glassmorphism/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:

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

Repository: fengshao1227/ccg-workflow
Path: templates/skills/domains/frontend-design/glassmorphism/SKILL.md
Commit: f349e3d

Last updated: 5 days ago
First committed: 6 months ago

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.