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.

Quality

90%

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

Liquid Glass Design System

Apple-inspired translucent glass UI with depth, refraction, and ambient light response.

Core Principles

Translucency — Surfaces reveal layered content beneath via backdrop blur
Depth — Elements float on distinct z-layers with realistic shadows
Ambient Response — Glass tints shift based on underlying content color
Minimal Chrome — Borders are subtle; shape and blur define boundaries
Motion — Transitions feel physical: spring-based, with inertia

Usage

Import the token file in your CSS:

@import 'references/tokens.css';

CSS Tokens Reference

All tokens are defined in references/tokens.css. Key categories:

Category	Prefix	Example
Glass backgrounds	`--lg-bg-*`	`--lg-bg-primary`
Blur	`--lg-blur-*`	`--lg-blur-md`
Borders	`--lg-border-*`	`--lg-border-color`
Shadows	`--lg-shadow-*`	`--lg-shadow-elevated`
Radius	`--lg-radius-*`	`--lg-radius-lg`
Animation	`--lg-duration-*`	`--lg-duration-normal`

Component Patterns

Glass Card

.glass-card {
  background: var(--lg-bg-primary);
  backdrop-filter: blur(var(--lg-blur-md));
  -webkit-backdrop-filter: blur(var(--lg-blur-md));
  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);
}

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

Glass Button

.glass-btn {
  background: var(--lg-bg-interactive);
  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:active {
  transform: scale(0.97);
  background: var(--lg-bg-pressed);
}

Glass Modal Overlay

.glass-overlay {
  background: var(--lg-bg-scrim);
  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);
}

Dark / Light Mode

Tokens auto-switch via prefers-color-scheme. Light mode uses white-tinted glass; dark mode uses dark-tinted glass with higher blur to maintain readability.

/* Force a mode on a subtree */
.light-glass { color-scheme: light; }
.dark-glass  { color-scheme: dark; }

Animations

Use spring-based easing for physical feel:

/* Entry */
@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;
}

Accessibility

Ensure contrast-ratio ≥ 4.5:1 for text over glass surfaces
Respect prefers-reduced-motion — disable blur animations, use opacity-only transitions
Provide prefers-contrast: high overrides that replace translucent backgrounds with solid ones

Repository: fengshao1227/ccg-workflow
Path: templates/skills/domains/frontend-design/liquid-glass/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.