liquid-glass

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.

155 stars

bytelagod

View on GitHub Installation ↓

Best use case

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

Teams using liquid-glass 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/liquid-glass/SKILL.md --create-dirs "https://raw.githubusercontent.com/telagod/code-abyss/main/skills/domains/frontend-design/liquid-glass/SKILL.md"

Manual Installation

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

How liquid-glass Compares

Feature / Agent	liquid-glass	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?

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

# Liquid Glass 设计规范

Apple 风格半透明玻璃 UI：纵深、折射、环境光响应。

## 五则

1. **透光** — 表面经 backdrop blur 透出下层
2. **纵深** — 元素浮于不同 z 层，写实阴影
3. **环境感应** — 玻璃色调随底层内容偏移
4. **极简边界** — 形状与模糊界定边缘，非描边
5. **物理动效** — 弹簧曲线，带惯性

## CSS Tokens

`@import 'references/tokens.css';` — 详见 [references/tokens.css](references/tokens.css)

| 类别 | 前缀 | 示例 |
|------|------|------|
| 玻璃底 | `--lg-bg-*` | `--lg-bg-primary` |
| 模糊 | `--lg-blur-*` | `--lg-blur-md` |
| 边框 | `--lg-border-*` | `--lg-border-color` |
| 阴影 | `--lg-shadow-*` | `--lg-shadow-elevated` |
| 圆角 | `--lg-radius-*` | `--lg-radius-lg` |
| 动画 | `--lg-duration-*` | `--lg-duration-normal` |
| 饱和 | `--lg-saturate` | `1.8` |

## 浏览器支持

| 特性 | Chrome | Firefox | Safari | Edge |
|------|--------|---------|--------|------|
| `backdrop-filter` | 76+ | 103+ | 9+(`-webkit-`) | 79+ |
| `filter: saturate()` | 53+ | 35+ | 9.1+ | 79+ |
| `linear()` easing | 113+ | 112+ | 17.2+ | 113+ |

须附 `-webkit-backdrop-filter`。`saturate()` 支持广泛，但 `linear()` easing 较新，回退用 `cubic-bezier`。

## 组件速查

```css
/* Card — hover 上浮加深影 */
.glass-card { background: var(--lg-bg-primary);
  backdrop-filter: blur(var(--lg-blur-md)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(var(--lg-blur-md)) saturate(var(--lg-saturate));
  border: 1px solid var(--lg-border-color); border-radius: var(--lg-radius-lg);
  box-shadow: var(--lg-shadow-elevated);
  transition: transform var(--lg-duration-normal) var(--lg-easing-spring); }
.glass-card:hover { transform: translateY(-2px); box-shadow: var(--lg-shadow-high); }

/* Toolbar */
.glass-toolbar { background: var(--lg-bg-toolbar);
  backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-saturate));
  border-bottom: 1px solid var(--lg-border-subtle);
  position: sticky; top: 0; z-index: 100; }

/* Button — active 缩放 */
.glass-btn { background: var(--lg-bg-interactive);
  backdrop-filter: blur(var(--lg-blur-sm));
  -webkit-backdrop-filter: blur(var(--lg-blur-sm));
  border: 1px solid var(--lg-border-color); border-radius: var(--lg-radius-md);
  transition: all var(--lg-duration-fast) var(--lg-easing-spring); }
.glass-btn:hover { background: var(--lg-bg-hover); }
.glass-btn:active { transform: scale(0.97); background: var(--lg-bg-pressed); }
.glass-btn:focus-visible { outline: 2px solid var(--lg-accent); outline-offset: 2px; }

/* Modal */
.glass-overlay { background: var(--lg-bg-scrim); backdrop-filter: blur(var(--lg-blur-xl));
  -webkit-backdrop-filter: blur(var(--lg-blur-xl)); }
.glass-modal { background: var(--lg-bg-elevated); border: 1px solid var(--lg-border-color);
  border-radius: var(--lg-radius-xl); box-shadow: var(--lg-shadow-high); }

/* Tab Bar */
.glass-tabs { display: flex; gap: 0; background: var(--lg-bg-primary);
  backdrop-filter: blur(var(--lg-blur-md)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(var(--lg-blur-md)) saturate(var(--lg-saturate));
  border-radius: var(--lg-radius-lg); padding: 4px; }
.glass-tab { flex: 1; text-align: center; padding: 0.5rem 1rem;
  border-radius: var(--lg-radius-md); transition: background var(--lg-duration-fast); }
.glass-tab[aria-selected="true"] { background: var(--lg-bg-elevated);
  box-shadow: var(--lg-shadow-elevated); }

/* Notification */
.glass-toast { background: var(--lg-bg-elevated);
  backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-saturate));
  border: 1px solid var(--lg-border-subtle); border-radius: var(--lg-radius-lg);
  box-shadow: var(--lg-shadow-high); padding: 0.75rem 1.25rem; }
```

## 文字对比度

半透明底上文字易失对比。策略：

```css
/* 文字底加半透明垫层，保证最低对比度 */
.glass-text-safe { text-shadow: 0 0 8px rgba(0,0,0,0.3); }
/* 或用伪元素垫底 */
.glass-label::before { content: ''; position: absolute; inset: -2px -6px;
  background: rgba(0,0,0,0.25); border-radius: 4px; z-index: -1; }
```

暗色模式下用 `rgba(0,0,0,0.5)` 垫层 + 白字；亮色用 `rgba(255,255,255,0.6)` + 深字。

## 明暗模式

Token 经 `prefers-color-scheme` 自动切换。亮用白调玻璃，暗用深调配更强模糊。

```css
:root { --lg-bg-primary: rgba(255,255,255,0.45); --lg-blur-md: 20px;
  --lg-saturate: 1.8; }
@media (prefers-color-scheme: dark) {
  :root { --lg-bg-primary: rgba(0,0,0,0.35); --lg-blur-md: 28px;
    --lg-saturate: 2.0; --lg-border-color: rgba(255,255,255,0.08); }
}
```

## 动画

弹簧缓动，物理质感：

```css
@keyframes glass-enter {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.glass-animate-in {
  animation: glass-enter var(--lg-duration-normal) var(--lg-easing-spring) both;
}
```

## 移动端性能

`backdrop-filter` + `saturate()` 叠加开销大。

- 同屏 blur 元素 ≤ 3 个；滚动容器内避免
- 低端设备降级：`@media (hover: none) and (pointer: coarse)` 减 blur 或用纯色
- `will-change: transform` 仅动画期间设置
- `saturate()` 单独开销低，可保留；主要瓶颈在 `blur()`

## 无障碍

- 玻璃面文字须保 `contrast-ratio ≥ 4.5:1`，用 text-shadow 或垫层兜底
- `prefers-reduced-motion: reduce` 禁弹簧动画，仅保留 opacity
- `prefers-contrast: more` 将半透明底替换为实色

```css
@media (prefers-reduced-motion: reduce) {
  .glass-card, .glass-btn { transition: none; }
  .glass-animate-in { animation: none; opacity: 1; }
}
@media (prefers-contrast: more) {
  .glass-card { backdrop-filter: none; -webkit-backdrop-filter: none;
    background: var(--lg-bg-solid, #fff); border: 2px solid var(--lg-text); }
}