Glassmorphism 设计系统完全指南

Glassmorphism（毛玻璃） 是近年来最流行的 UI 设计趋势之一。它以半透明背景 + 模糊效果为核心，创造出层次丰富、现代感十足的视觉体验。

什么是 Glassmorphism？

Glassmorphism 的核心视觉特征：

半透明背景 (Transparency) — 使用 rgba() 颜色值
模糊滤镜 (Backdrop Blur) — backdrop-filter: blur()
细腻边框 (Subtle Border) — 1px 半透明白色边框
多层阴影 (Layered Shadows) — 柔和的深度感
色彩渗透 (Color Bleeding) — 背景内容透过毛玻璃层隐约可见

核心实现代码

基础毛玻璃卡片

css

.glass-card {
  /* 半透明背景 */
  background: rgba(255, 255, 255, 0.7);

  /* 毛玻璃模糊效果 */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* 细腻边框 */
  border: 1px solid rgba(255, 255, 255, 0.2);

  /* 多层阴影营造深度 */
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);

  /* 圆角增强柔和度 */
  border-radius: 16px;
}

暗色模式适配

css

[data-theme="dark"] .glass-card {
  background: rgba(15, 23, 42, 0.65);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.3),
    0 2px 4px -1px rgba(0, 0, 0, 0.15);
}

GlazePress 中的 Glassmorphism 应用

导航栏 — 滚动渐变效果

滚动位置	背景	模糊	边框
顶部	透明	无	无
向下滚动	半透明白色	blur(16px)	底部细线

css

.navbar-glass.scrolled {
  background: var(--bg-glass);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--bg-glass-border);
}

搜索模态框 — 缩放入场动画

plaintext

状态变化:
  初始 → scale(0.95), opacity: 0
  打开 → scale(1), opacity: 1 (cubic-bezier 弹性曲线)

代码块 — 深色毛玻璃标题栏

每个代码块都有独立的毛玻璃标题栏：

显示语言类型（如 JavaScript）
复制按钮（点击后变为绿色"已复制 ✓"）
深色代码区域 + 行号侧边栏

性能注意事项

⚠️ backdrop-filter 是 GPU 密集型操作，需注意性能影响。

优化策略

限制使用范围 — 只在关键 UI 元素上使用毛玻璃
避免嵌套 — 多层叠加会指数级增加渲染成本
GPU 加速 — 确保 will-change 或 transform 触发合成层
降级处理 — 对不支持 backdrop-filter 的浏览器提供纯色降级方案

css

/* 浏览器兼容性检测与降级 */
@supports not (backdrop-filter: blur(12px)) {
  .glass-card {
    background: white; /* 降级为不透明白色 */
  }
}

/* prefers-reduced-motion 减少动画 */
@media (prefers-reduced-motion: reduce) {
  .glass-card {
    transition: none;
  }
}

浏览器支持情况

浏览器	支持版本	前缀要求
Chrome / Edge	76+	需要 `-webkit-`
Firefox	103+	原生支持
Safari	9+	需要 `-webkit-`
Opera	63+	需要 `-webkit-`

设计变量体系

GlazePress 使用 CSS 变量统一管理所有毛玻璃参数：

css

:root {
  --glass-blur: 12px;
  --glass-bg-light: rgba(255, 255, 255, 0.7);
  --glass-bg-dark: rgba(15, 23, 42, 0.6);
  --bg-glass-border: rgba(255, 255, 255, 0.2);
}

这种设计使得：

主题切换只需修改变量值
自定义主题只需覆盖变量
一致性由变量保证

Glassmorphism 不只是一种视觉效果，更是一种层次化信息架构的表达方式。当正确使用时，它能让界面既美观又清晰。

# Glassmorphism 设计系统完全指南

# 什么是 Glassmorphism？

# 核心实现代码

# 基础毛玻璃卡片

# 暗色模式适配

# GlazePress 中的 Glassmorphism 应用

# 导航栏 — 滚动渐变效果

# 搜索模态框 — 缩放入场动画

# 代码块 — 深色毛玻璃标题栏

# 性能注意事项

# 优化策略

# 浏览器支持情况

# 设计变量体系

评论