Glassmorphism CSS 生成器

在线生成玻璃拟态 CSS 效果。调整模糊、饱和度、背景透明度、边框、圆角和阴影，实时预览。输出含 backdrop-filter + -webkit-backdrop-filter fallback 的完整 CSS 代码。纯浏览器运行。

100% 浏览器端运行 数据不离开你的设备 免费 · 无需注册
15%
12px
180%
30%
1px
16px
20%
预览
Glassmorphism
CSS Effect Generator
生成的 CSS

相关工具

CSS 阴影生成器 可视化生成 CSS box-shadow 值，通过滑块调整水平偏移、垂直偏移、模糊、扩散、不透明度、颜色和内阴影，实时预览，一键复制。 CSS 变量生成器 从设计 token 生成 CSS 自定义属性，定义颜色、字体、间距、圆角，输出 :root 变量代码块。 CSS Grid 生成器 可视化构建 CSS Grid 布局，设置列数、行数、间距和模板值，实时预览并生成代码。 CSS Flexbox 生成器 可视化构建 CSS Flexbox 布局，配置弹性方向、换行、对齐等属性，实时预览并生成代码。 UUID 生成器 即时生成 v4 UUID，支持单个或批量生成。 颜色转换器 在 HEX、RGB 和 HSL 格式之间转换颜色，带实时颜色预览。

使用方法

  1. 选择背景颜色并设置背景透明度（通常 10–25%）。
  2. 增大模糊（推荐 10–20px）以获得磨砂玻璃效果。
  3. 调整饱和度控制玻璃后方的色彩鲜艳程度。
  4. 设置边框颜色、边框透明度和边框宽度——细的半透明边框能清晰定义玻璃边缘。
  5. 用圆角圆润卡片边角（12–20px 是常用值）。
  6. 添加柔和阴影让卡片从背景中浮起。
  7. 切换背景预设（日落、海洋、森林、深夜、极光）测试不同场景下的效果。
  8. 点击复制将生成的 CSS 复制到剪贴板。

CSS 输出参考

.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.20);
}

常见玻璃拟态预设

  • 浅色玻璃（白色）：背景 rgba(255,255,255,0.15)，模糊 12px，边框 rgba(255,255,255,0.3)
  • 深色玻璃：背景 rgba(0,0,0,0.25)，模糊 16px，边框 rgba(255,255,255,0.1)
  • 强磨砂：背景 rgba(255,255,255,0.25)，模糊 20px，饱和度 200%
  • 极简：背景 rgba(255,255,255,0.08)，模糊 8px，无边框

浏览器支持说明

backdrop-filter 在所有主流浏览器中均受支持（Chrome 76+、Firefox 103+、Safari 9+、Edge 79+）。始终同时包含 backdrop-filter 和 -webkit-backdrop-filter。针对不支持的浏览器，可用半透明纯色背景作为降级方案。

相关工具

FAQ

什么是 Glassmorphism（玻璃拟态）？

Glassmorphism 是一种模拟磨砂玻璃的 UI 设计风格。元素呈半透明状，背景经过模糊处理，配以微妙边框和柔和阴影，营造层次感而不遮挡背景内容。该风格随 2020 年 Apple macOS Big Sur 的发布而流行。

backdrop-filter 的作用是什么？

CSS backdrop-filter 属性对元素背后的区域（而非元素本身）应用图形效果，如模糊、饱和度、对比度等。玻璃拟态中最常用的两个函数是 blur()（模糊背景，制造磨砂感）和 saturate()（保持背景色彩鲜艳）。

为什么需要 -webkit-backdrop-filter？

Safari 需要 -webkit- 前缀才能支持 backdrop-filter。不加前缀时，效果在 Safari 和 iOS 上会悄然失效。始终同时写 backdrop-filter 和 -webkit-backdrop-filter，且值完全一致，以确保跨浏览器兼容。

背景透明度设置多少合适？

通常 10%–25% 的背景透明度可呈现出理想的磨砂玻璃效果。透明度过高则模糊感消失，过低则文字可读性下降。建议配合 10–20px 的模糊半径使用。

backdrop-filter 会影响性能吗？

backdrop-filter 在现代浏览器中由 GPU 加速，但将其应用于大量叠加元素时仍可能影响帧率。建议仅在少量关键卡片上使用，避免嵌套玻璃拟态元素。

这个工具是纯客户端运行的吗？

是的。所有生成均在浏览器中完成，不向服务器发送任何数据。