# glassmorphism

Generates frosted glass interface elements using blur, opacity, and delicate borders. Helpful when building floating action buttons, popovers, and navigation bars.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 526 installs · ★ 6
- Author: ainergiz
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/ainergiz/design-inspirations/tree/HEAD/.claude/skills/glassmorphism/SKILL.md
- Updated: 2026-02-08
- HTML: https://affpapa.org/en/nevibecode/skills/ainergiz-glassmorphism

## What it does

The skill equips coding agents with Tailwind CSS combinations for translucent UI pieces. It breaks down presets from subtle to pronounced glass, relying on `backdrop-blur` utilities, semi-transparent fills, and light borders like `border-white/10`. As a result, the model applies consistent styles for floating triggers, carousel dots, and header strips.

Guidelines also outline text readability over varied backdrop opacities so letters do not wash out. Heavy use of backdrop filters drops frame rates on budget phones, so spreading frosted layers across broad viewports will degrade rendering.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add ainergiz/design-inspirations --skill glassmorphism -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/glassmorphism/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/glassmorphism/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add ainergiz/design-inspirations --skill glassmorphism -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/glassmorphism/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add ainergiz/design-inspirations --skill glassmorphism -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/glassmorphism/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install ainergiz/design-inspirations glassmorphism
```

2. **Manually: put the files in place**
- File: `.github/skills/glassmorphism/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add ainergiz/design-inspirations --skill glassmorphism -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/ainergiz/design-inspirations --path .claude/skills/glassmorphism
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/glassmorphism/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add ainergiz/design-inspirations --skill glassmorphism -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/ainergiz/design-inspirations/tree/HEAD/.claude/skills/glassmorphism/SKILL.md

## When to use it
- generate Tailwind utility classes for frosted glass layers
- style floating action buttons and tooltips with backdrop blur
- pick readable typography colors for semi-transparent backdrops
- prevent rendering lag caused by heavy backdrop filters

## Example prompts
- Build a floating header using frosted glass styling over the hero banner
- Add a glassmorphic circular action button in the bottom corner
- Create a semi-transparent tooltip container with blurred backdrop

## Similar
- [glass-dark-ui](https://affpapa.org/en/nevibecode/skills/glass-dark-ui.md) — skill · 1500 installs
- [ui-web](https://affpapa.org/en/nevibecode/skills/ui-web.md) — skill · 393 installs
- [responsive-paradigms](https://affpapa.org/en/nevibecode/skills/responsive-paradigms.md) — skill · 875 installs
- [glass-dark-mode-clock](https://affpapa.org/en/nevibecode/skills/glass-dark-mode-clock.md) — skill · 1400 installs
- [quick-mockups](https://affpapa.org/en/nevibecode/skills/quick-mockups.md) — skill · 1700 installs
- [ui-designer](https://affpapa.org/en/nevibecode/skills/daymade-ui-designer.md) — skill · 1600 installs

## Other versions with the same name
- [glassmorphism · bergside](https://affpapa.org/en/nevibecode/skills/typeuish-glassmorphism.md) — 2900 installs
- [glassmorphism · iart-ai](https://affpapa.org/en/nevibecode/skills/glassmorphism.md) — 2400 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md