glassmorphism

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

15 stars

byifiokjr

View on GitHub Installation ↓

Best use case

glassmorphism is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

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

Teams using glassmorphism should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/glassmorphism/SKILL.md --create-dirs "https://raw.githubusercontent.com/ifiokjr/oh-pi/main/packages/skills/skills/glassmorphism/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/glassmorphism/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How glassmorphism Compares

Feature / Agent	glassmorphism	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

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

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Glassmorphism Design Spec

## 4 Core Elements

1. **Transparency** — Semi-transparent backgrounds using `rgba()` or `hsla()` with alpha `0.05–0.4`
2. **Blur** — `backdrop-filter: blur()` ranging 8–40px for frosted-glass effect
3. **Border** — Subtle semi-transparent borders (`1px solid rgba(255,255,255,0.18)`) to define edges
4. **Shadow** — Soft layered `box-shadow` for depth separation from background

## CSS Tokens

Reference: [references/tokens.css](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);
	}
}
```

Related Skills

write-a-skill

from ifiokjr/oh-pi

Create new agent skills with proper structure, progressive disclosure, and bundled resources. Use when user wants to create, write, or build a new skill.

web-search

from ifiokjr/oh-pi

Web search via DuckDuckGo. Use when the user needs to look up current information online.

web-fetch

from ifiokjr/oh-pi

Fetch a web page and extract readable text content. Use when user needs to retrieve or read a web page.

rust-workspace-bootstrap

from ifiokjr/oh-pi

Scaffold a production-ready Rust workspace with knope changesets, devenv, and GitHub Actions CI/release workflows. Use when starting a new Rust project or monorepo.

request-refactor-plan

from ifiokjr/oh-pi

Create a detailed refactor plan with tiny commits via user interview, then file it as a GitHub issue. Use when user wants to plan a refactor, create a refactoring RFC, or break a refactor into safe incremental steps.

quick-setup

from ifiokjr/oh-pi

Detect project type and generate .pi/ configuration. Use when setting up pi for a new project or when user asks to initialize pi config.

pwsh

from ifiokjr/oh-pi

PowerShell syntax reference — cmdlets, objects, pipelines, filtering, comparison operators, and Bash-to-PowerShell command equivalents

nushell

from ifiokjr/oh-pi

Nushell syntax reference for shell commands — variables, pipelines, tables, custom commands, control flow, Bash-to-Nu equivalents, and common gotchas

neubrutalism

from ifiokjr/oh-pi

Neubrutalism design system skill. Use when building bold UI with thick borders, offset solid shadows, high saturation colors, and minimal border radius.

liquid-glass

from ifiokjr/oh-pi

Apple Liquid Glass design system. Use when building UI with translucent, depth-aware glass morphism following Apple's design language. Provides CSS tokens, component patterns, dark/light mode, and animation specs.

improve-codebase-architecture

from ifiokjr/oh-pi

Explore a codebase to find opportunities for architectural improvement, focusing on making the codebase more testable by deepening shallow modules. Use when user wants to improve architecture, find refactoring opportunities, consolidate tightly-coupled modules, or make a codebase more AI-navigable.

grill-me

from ifiokjr/oh-pi

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".