glassmorphism-advanced

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Glassmorphism Advanced

Glassmorphism 高级实现指南

Agent Workflow (MANDATORY)

Agent工作流（必填步骤）

Before implementation, use

TeamCreate

to spawn 3 agents:

fuse-ai-pilot:explore-codebase - Check existing glass patterns
fuse-ai-pilot:research-expert - Latest backdrop-filter support

After: Run fuse-ai-pilot:sniper for validation.

在开始实现前，使用

TeamCreate

创建3个Agent：

fuse-ai-pilot:explore-codebase - 检查现有玻璃态设计模式
fuse-ai-pilot:research-expert - 调研backdrop-filter的最新支持情况

之后：运行fuse-ai-pilot:sniper进行验证。

Overview

概览

Feature	Description
Blur Levels	sm, md, xl, 3xl
Opacity Layers	Multiple glass layers for depth
Colored Glass	Tinted with CSS variables
Borders	Subtle white/20 borders

特性	说明
模糊级别	sm, md, xl, 3xl
透明度分层	多层玻璃态效果以营造层次感
彩色玻璃态	通过CSS变量实现着色
边框	低透明度白色边框（white/20）

Critical Rules

核心规则

backdrop-blur required - No flat backgrounds
Semi-transparent bg - Use bg-white/10, bg-black/40
Subtle borders - border-white/20
Shadow for depth - shadow-xl shadow-primary/10
Dark mode variant - Always define both

必须使用backdrop-blur - 禁止使用纯色平面背景
半透明背景 - 使用bg-white/10、bg-black/40这类类名
柔和边框 - 使用border-white/20类名
阴影增强层次感 - 使用shadow-xl shadow-primary/10类名
深色模式适配 - 必须同时定义亮色和深色模式样式

Quick Reference

快速参考

Base Glassmorphism

基础玻璃态实现

tsx

className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl"

tsx

className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl"

With Colored Shadow

带彩色阴影的实现

tsx

className="bg-white/10 backdrop-blur-xl border border-white/20 shadow-xl shadow-primary/10"

tsx

className="bg-white/10 backdrop-blur-xl border border-white/20 shadow-xl shadow-primary/10"

Blur Levels

模糊级别

Level	Class	Use Case
Subtle	`backdrop-blur-sm`	Overlays on clean backgrounds
Medium	`backdrop-blur-md`	Cards, modals
Strong	`backdrop-blur-xl`	Primary surfaces
Maximum	`backdrop-blur-3xl`	Hero sections

级别	类名	适用场景
轻微模糊	`backdrop-blur-sm`	简洁背景上的覆盖层
中等模糊	`backdrop-blur-md`	卡片、模态框
强烈模糊	`backdrop-blur-xl`	主要界面区域
极致模糊	`backdrop-blur-3xl`	首页横幅区域

Layered Glass Stack

分层玻璃态堆叠

tsx

<div className="relative">
  {/* Background layer - most blur */}
  <div className="absolute inset-0 bg-white/5 backdrop-blur-3xl rounded-3xl" />

  {/* Middle layer */}
  <div className="absolute inset-2 bg-white/10 backdrop-blur-xl rounded-2xl" />

  {/* Content layer - least blur */}
  <div className="relative bg-white/20 backdrop-blur-md rounded-xl p-6">
    {children}
  </div>
</div>

tsx

<div className="relative">
  {/* 背景层 - 最高模糊度 */}
  <div className="absolute inset-0 bg-white/5 backdrop-blur-3xl rounded-3xl" />

  {/* 中间层 */}
  <div className="absolute inset-2 bg-white/10 backdrop-blur-xl rounded-2xl" />

  {/* 内容层 - 最低模糊度 */}
  <div className="relative bg-white/20 backdrop-blur-md rounded-xl p-6">
    {children}
  </div>
</div>

Dark Mode

深色模式

tsx

/* Light mode */
className="bg-white/80 backdrop-blur-xl"

/* Dark mode */
className="dark:bg-black/40 dark:backdrop-blur-xl"

tsx

/* 亮色模式 */
className="bg-white/80 backdrop-blur-xl"

/* 深色模式 */
className="dark:bg-black/40 dark:backdrop-blur-xl"

Validation Checklist

验证检查清单

[ ] backdrop-blur-* present
[ ] Semi-transparent background (bg-*/opacity)
[ ] Subtle border (border-white/20)
[ ] Works on gradient backgrounds
[ ] Dark mode variant defined

[ ] 是否包含backdrop-blur-*类
[ ] 是否使用半透明背景（bg-*/透明度格式）
[ ] 是否使用柔和边框（border-white/20）
[ ] 是否支持渐变背景
[ ] 是否定义了深色模式适配样式