Developer Design Utility
Glassmorphism 生成器
通过调整透明度、backdrop blur、边框、圆角和阴影，创建玻璃质感的 Glassmorphism CSS，并实时查看效果。
创建 Glass UI
结合半透明背景与模糊效果，创建玻璃风格的 UI 卡片。
实时预览
Opacity、Blur、Border、Radius、Shadow 数值会立即反映到预览卡片中。
复制 CSS 代码
可以复制生成的 Glassmorphism CSS，也可以下载为 CSS 文件。
Blur
18px
Opacity
22%
Border
34%
Radius
28px
Glassmorphism 设置
调整背景颜色、透明度、模糊、饱和度、边框和阴影，创建理想的玻璃效果。
玻璃卡片的基础背景颜色。白色适合经典 Glass UI，彩色适合强调型卡片。
0%
22%
100%
0px
18px
40px
100%
160%
220%
0%
34%
100%
0px
28px
60px
0%
18%
80%
16px
32px
64px
Live Preview
Glass UI
Glassmorphism Card
实时查看透明玻璃质感与模糊效果。
Blur
18px
Opacity
22%
Radius
28px
推荐预设
快速应用常用于卡片、横幅、模态框和深色背景 UI 的 Glassmorphism 风格。
基础 Glass UI
彩色 Glass UI
特殊风格
生成结果
以下代码可直接用于 CSS 文件、组件样式或内联样式。
选择设置后，点击“生成 CSS 代码”按钮。
帮助
什么是 Glassmorphism？
Glassmorphism 是一种通过半透明背景、模糊效果、细边框和阴影来模拟玻璃质感的 UI 风格。常用于卡片、模态框、横幅、仪表盘组件和个人资料面板。
核心 CSS 属性
background: 半透明背景颜色backdrop-filter: 模糊元素后方背景border: 表现玻璃边缘效果box-shadow: 增加层次感和立体感
推荐数值
- 普通 Glass 卡片：Opacity 16%~28%，Blur 14px~24px
- Frosted Glass：Opacity 8%~16%，Blur 24px 以上
- 深色背景卡片：Opacity 20%~35%，Border Opacity 15%~30%
- 彩色 Glass：强调色搭配较低透明度
注意事项
Glassmorphism 在渐变、图片或纹理背景上效果更明显，而在纯色背景上效果较弱。同时不要将透明度设置得过低，以保证文本可读性。
玻璃效果不明显怎么办？
在卡片后方放置渐变或图片等具有颜色变化的背景，可以让模糊效果更加明显。提高 Blur 值和 Border Opacity 也会有所帮助。
文字可读性不足怎么办？
可以提高 Background Opacity，或者使用更深的文字颜色。过于透明的玻璃卡片虽然美观，但在实际界面中可能降低可读性。
backdrop-filter 在所有浏览器中都支持吗？
大多数现代浏览器都支持，但某些环境仍可能存在限制。因此建议同时添加 -webkit-backdrop-filter。