What is glassmorphism?

A visual design guide for frosted-glass interfaces, using partly transparent surfaces, background blur, borders, and shadows to create layered depth.

Use it when creating glass-style cards, navigation bars, and other user-interface components with CSS.

It provides consistent rules and reusable style tokens for building this look instead of choosing each effect separately.

glassmorphism — Skill for Claude Code by qinye6

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add qinye6/pi-ccg --skill glassmorphism

Clone the repo

git clone --depth 1 https://github.com/qinye6/pi-ccg

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/qinye6/pi-ccg/glassmorphism.svg)](https://agentmods.dev/skills/qinye6/pi-ccg/glassmorphism)

Your own site

<a href="https://agentmods.dev/skills/qinye6/pi-ccg/glassmorphism"><img src="https://agentmods.dev/badge/skills/qinye6/pi-ccg/glassmorphism.svg" alt="Measured on agentmods" height="20"></a>

Per session 30 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 1,015 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin 100% copy Near-identical to another mod in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00030	$0.01015
Opus 5	$0.00015	$0.00508
Sonnet 5	$0.00006	$0.00203
Haiku 4.5	$0.00003	$0.00102

Measured 8d ago against content hash d41e43d9116d, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-08, from the pricing page.

Security

Grade A, and why

glassmorphism scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

This is a copy

100% identical to glassmorphism — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

templates/skills/domains/frontend-design/glassmorphism/SKILL.md · 141 lines

How it starts

The opening of the file, as written. The whole thing — 141 lines — stays where its author put it; the contents beside it link to each section on GitHub.

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

Read the full file on GitHub · 141 lines

Files

What ships with it

1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

references/tokens.css 886 B

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

8d ago First seen · 141 lines · 30 tokens per session scan A d41e43d9116d

Subscribe to this mod's changes

glassmorphism is a skill published in the GitHub repository qinye6/pi-ccg (10 stars, last pushed 14d ago), licensed MIT. It adds 30 tokens to every session and 1,015 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. It is 100% identical to glassmorphism, differing in 0 lines, and is treated as a copy.

Design and UX

webgl-holographic-foil

A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.

nexu-io/open-design · 41 tokens

html-ppt-hermes-cyber-terminal

OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.

nexu-io/open-design · 53 tokens

html-ppt-taste-brutalist

16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Tactical Telemetry mode).

nexu-io/open-design · 78 tokens

glassmorphism