CSS 毛玻璃生成器
通过模糊、透明度、饱和度、边框和阴影控件以及色调颜色生成毛玻璃效果 CSS，在背景上实时预览，并复制基于 backdrop-filter 的 CSS。
正在加载工具…
CSS 毛玻璃生成器 — 用简单的滑块调出毛玻璃卡片——模糊、透明度、饱和度、边框宽度和柔和阴影——选择一个色调颜色，实时预览便会浮现在彩色背景之上，同时为你生成完整的 backdrop-filter CSS。一切都在浏览器本地运行，你的颜色和数值绝不会上传。复制结果即可直接粘贴到样式表中。
CSS 毛玻璃生成器 是什么？
CSS 毛玻璃生成器是一款免费的毛玻璃（glassmorphism）界面风格可视化编辑器，为前端开发者和产品设计师打造。用数字输入框和滑块调整模糊量、表面透明度、颜色饱和度、边框粗细、圆角半径和阴影强度，再用色块选择色调颜色。实时预览面板会在鲜艳的渐变背景上即时显示玻璃面板，并为你生成完整的 CSS——使用 backdrop-filter、半透明背景、细微边框和 box-shadow——供你复制。无论是制作玻璃卡片、导航栏、弹窗还是遮罩层，都无需手动调节 rgba 透明度或记住 -webkit-backdrop-filter 前缀。
如何使用 CSS 毛玻璃生成器
- 设置「模糊」（单位 px）来控制面板后方区域的磨砂强度。
- 降低「透明度」让玻璃更通透，或提高它获得更实心的表面。
- 将「饱和度」提升到 100% 以上，让背景颜色透过玻璃更鲜明。
- 用色块选择色调颜色，并调整「边框」宽度、「圆角」和「阴影」来完善效果。
- 在更改每个数值时，实时观察预览在背景上更新。
- 将生成的 CSS 复制到样式表中——它已包含 -webkit-backdrop-filter 回退前缀。
示例
毛玻璃卡片
输入
模糊 12, 透明度 25%, 饱和度 120%, 圆角 16, 边框 1, 阴影 24
输出
backdrop-filter: blur(12px) saturate(120%); background: rgba(255, 255, 255, 0.25); …
淡雅玻璃导航栏
输入
模糊 8, 透明度 60%, 饱和度 100%, 圆角 0, 边框 1, 阴影 8
输出
backdrop-filter: blur(8px) saturate(100%); background: rgba(255, 255, 255, 0.6); …
厚重暗色玻璃遮罩
输入
色调 #0f172a, 模糊 20, 透明度 30%, 饱和度 140%, 圆角 24, 阴影 40
输出
backdrop-filter: blur(20px) saturate(140%); background: rgba(15, 23, 42, 0.3); …
常见问题
- backdrop-filter 有什么作用？
- backdrop-filter 会对元素背后的内容应用图形效果——这里是模糊和饱和度——这正是毛玻璃外观的来源。生成器同时输出 backdrop-filter 和 -webkit-backdrop-filter 前缀以兼容各浏览器，并附带半透明背景、边框和阴影。
- 为什么有透明度控件？
- 玻璃效果需要部分透明的背景，才能让模糊后的背景透出来。透明度滑块设置面板背景颜色（rgba）的 alpha 值：数值越低越透明，越高则越不透明、越实心。
- 可以做彩色或暗色玻璃吗？
- 可以。用色块选择任意色调颜色——工具会把它混入 rgba 背景，因此你可以制作暖色、冷色或暗色玻璃。将暗色调与较高透明度结合可做出沉稳的遮罩，或保持白色获得经典毛玻璃面板。
- 它能在所有浏览器中工作吗？
- 大多数现代浏览器都支持 backdrop-filter。生成的 CSS 包含针对 Safari 和较旧 Chromium 的 -webkit-backdrop-filter 前缀，但非常老旧的浏览器会忽略它，只显示半透明背景而没有模糊。
- 我的数据会被上传到任何地方吗？
- 不会。生成器完全在你的浏览器中通过 JavaScript 运行——你的颜色和数值绝不会发送到服务器，因此既能保护隐私，页面加载后甚至还能离线使用。