glassmorphism

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Glassmorphism Pattern

毛玻璃设计模式

Create frosted glass effects for overlays and floating UI elements.

为遮罩层和悬浮UI元素创建毛玻璃效果。

Core Classes

核心类

tsx

// Standard glassmorphic container
<div className="bg-black/20 backdrop-blur-md border border-white/10">
  ...
</div>

tsx

// 标准毛玻璃容器
<div className="bg-black/20 backdrop-blur-md border border-white/10">
  ...
</div>

Variations

变体样式

Dark Overlay (on images/media)

深色遮罩层（用于图片/媒体之上）

Best for controls overlaid on images or video.

tsx

<div className="bg-black/20 backdrop-blur-md border border-white/10 rounded-full px-3 py-2">
  {/* Content */}
</div>

最适合用于覆盖在图片或视频上的控件。

tsx

<div className="bg-black/20 backdrop-blur-md border border-white/10 rounded-full px-3 py-2">
  {/* 内容 */}
</div>

Light Overlay (on dark backgrounds)

浅色遮罩层（用于深色背景之上）

tsx

<div className="bg-white/10 backdrop-blur-md border border-white/20 rounded-xl px-4 py-3">
  {/* Content */}
</div>

tsx

<div className="bg-white/10 backdrop-blur-md border border-white/20 rounded-xl px-4 py-3">
  {/* 内容 */}
</div>

Subtle Glass (minimal effect)

轻量毛玻璃（极简效果）

tsx

<div className="bg-black/10 backdrop-blur-sm border border-white/5 rounded-lg px-3 py-2">
  {/* Content */}
</div>

tsx

<div className="bg-black/10 backdrop-blur-sm border border-white/5 rounded-lg px-3 py-2">
  {/* 内容 */}
</div>

Strong Glass (prominent effect)

强效毛玻璃（突出效果）

tsx

<div className="bg-black/40 backdrop-blur-lg border border-white/20 rounded-2xl px-5 py-4">
  {/* Content */}
</div>

tsx

<div className="bg-black/40 backdrop-blur-lg border border-white/20 rounded-2xl px-5 py-4">
  {/* 内容 */}
</div>

Token Reference

样式令牌参考

Property	Light Glass	Standard	Strong
Background	`bg-black/10`	`bg-black/20`	`bg-black/40`
Blur	`backdrop-blur-sm`	`backdrop-blur-md`	`backdrop-blur-lg`
Border	`border-white/5`	`border-white/10`	`border-white/20`

属性	轻量毛玻璃	标准样式	强效样式
背景	`bg-black/10`	`bg-black/20`	`bg-black/40`
模糊	`backdrop-blur-sm`	`backdrop-blur-md`	`backdrop-blur-lg`
边框	`border-white/5`	`border-white/10`	`border-white/20`

Common Use Cases

常见使用场景

Carousel Indicators

轮播指示器

tsx

<div className="absolute bottom-3 left-1/2 -translate-x-1/2">
  <div className="flex items-center gap-2 px-3 py-2 rounded-full bg-black/20 backdrop-blur-md border border-white/10">
    {/* Indicator dots */}
  </div>
</div>

tsx

<div className="absolute bottom-3 left-1/2 -translate-x-1/2">
  <div className="flex items-center gap-2 px-3 py-2 rounded-full bg-black/20 backdrop-blur-md border border-white/10">
    {/* 指示器圆点 */}
  </div>
</div>

Floating Action Button

悬浮操作按钮

tsx

<button className="fixed bottom-6 right-6 p-4 rounded-full bg-black/20 backdrop-blur-md border border-white/10 hover:bg-black/30 transition-colors">
  <Icon className="w-6 h-6 text-white" />
</button>

tsx

<button className="fixed bottom-6 right-6 p-4 rounded-full bg-black/20 backdrop-blur-md border border-white/10 hover:bg-black/30 transition-colors">
  <Icon className="w-6 h-6 text-white" />
</button>

Tooltip/Popover

提示框/弹出层

tsx

<div className="absolute top-full mt-2 px-3 py-2 rounded-lg bg-black/30 backdrop-blur-md border border-white/10">
  <span className="text-white text-sm">Tooltip content</span>
</div>

tsx

<div className="absolute top-full mt-2 px-3 py-2 rounded-lg bg-black/30 backdrop-blur-md border border-white/10">
  <span className="text-white text-sm">提示框内容</span>
</div>

Navigation Bar (over hero)

导航栏（置于首屏横幅之上）

tsx

<nav className="fixed top-0 left-0 right-0 z-50 bg-black/10 backdrop-blur-md border-b border-white/10">
  {/* Nav content */}
</nav>

tsx

<nav className="fixed top-0 left-0 right-0 z-50 bg-black/10 backdrop-blur-md border-b border-white/10">
  {/* 导航内容 */}
</nav>

Text Contrast

文本对比度

When using glassmorphism, ensure text has sufficient contrast:

Background Opacity	Text Color
`bg-black/10` - `bg-black/20`	`text-white` or `text-white/90`
`bg-black/30` - `bg-black/40`	`text-white`
`bg-white/10` - `bg-white/20`	`text-white` or `text-zinc-100`

使用毛玻璃效果时，需确保文本具备足够的对比度：

背景透明度	文本颜色
`bg-black/10` - `bg-black/20`	`text-white` 或 `text-white/90`
`bg-black/30` - `bg-black/40`	`text-white`
`bg-white/10` - `bg-white/20`	`text-white` 或 `text-zinc-100`

Performance Note

性能注意事项

backdrop-blur

can impact performance on lower-end devices. Consider:

Using smaller blur values (
```
backdrop-blur-sm
```
) for frequently updated elements
Avoiding large glassmorphic areas that cover significant viewport
Testing on mobile devices

backdrop-blur

可能会对低端设备的性能产生影响。建议：

对于频繁更新的元素，使用较小的模糊值（如
```
backdrop-blur-sm
```
）
避免使用覆盖视窗大面积区域的毛玻璃元素
在移动设备上进行测试

Checklist

检查清单

Background has transparency (e.g.,
```
bg-black/20
```
)
```
backdrop-blur-*
```
applied for frosted effect
Subtle border with transparency (
```
border-white/10
```
)
Text has sufficient contrast
Border radius matches design language
Tested on lower-end devices for performance

背景设置了透明度（例如
```
bg-black/20
```
）
应用了
```
backdrop-blur-*
```
以实现毛玻璃效果
添加了带透明度的细微边框（如
```
border-white/10
```
）
文本具备足够的对比度
边框圆角符合设计语言
在低端设备上测试过性能