glassmorphism

Name: glassmorphism
Author: ainergiz

github.com/ainergiz设计与 UI6527 次安装42 周前更新

代码仓库

关于 glassmorphism

用于构建毛玻璃效果覆盖层和浮动界面的设计模式，适合设计或实现相关 UI 的人员。它提供不同强度和明暗方向的样式参考，并包含文字对比度与性能注意事项。

主要功能

01提供多种毛玻璃强度
02区分深色与浅色覆盖层
03列出背景、模糊和边框值
04提示文字对比度要求
05说明模糊效果的性能考量

适用场景

01为图片或视频添加悬浮控件
02设计轮播指示器或浮动按钮
03制作工具提示和弹出层
04在主视觉区域叠加导航栏

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/ainergiz/design-inspirations --skill glassmorphism

安装后在 Claude Code 中输入/glassmorphism确认已加载。

详细介绍

玻璃拟态样式

为叠加层和悬浮 UI 元素创建磨砂玻璃效果。

核心类

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

变体

深色叠加层（用于图片/媒体）

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

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

浅色叠加层（用于深色背景）

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

微妙玻璃效果（效果轻微）

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

强烈玻璃效果（效果突出）

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

令牌参考

属性	浅色玻璃效果	标准	强烈
背景	`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`

常见用例

轮播指示器

<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>

悬浮操作按钮

<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>

工具提示/弹出框

<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>

导航栏（覆盖在主视觉区上）

<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>

文本对比度

使用玻璃拟态样式时，请确保文本具有足够的对比度：

背景不透明度	文本颜色
`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`

性能提示

backdrop-blur 可能会影响低端设备的性能。建议：

对频繁更新的元素使用较小的模糊值（backdrop-blur-sm）
避免使用覆盖大部分视口的大面积玻璃拟态区域
在移动设备上进行测试

检查清单

背景具有透明度（例如：bg-black/20）
已应用 backdrop-blur-* 以实现磨砂效果
使用带透明度的细微边框（border-white/10）
文本具有足够的对比度
圆角与设计语言相符
已在低端设备上测试性能

支持 Markdown

登录后评论