毛玻璃 CSS 生成器, backdrop-filter 模糊 + 透明度 + 描边一站调, 含 8 套真实背景预览, 一键复制 CSS / Tailwind / SwiftUI 代码。
- 本地处理
- 分类 生成器
- 适合 从空白开始,先拿到一版可修改的结果。
.glass {
background: rgba(255, 255, 255, 0.25);
-webkit-backdrop-filter: blur(12px) saturate(160%);
backdrop-filter: blur(12px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 16px;
box-shadow: 0 4px 24px -8px rgba(15, 23, 42, 0.18);
}这个工具能做什么
一个把毛玻璃卡片做到位的生成器,而且把代码导到了你真正会贴的四个 地方:原生 CSS (自带 -webkit-backdrop-filter 前缀, Safari 不会 翻车)、Tailwind class (backdrop-blur-md bg-white/25 border-white/18 这种直接复制)、SwiftUI Material (RoundedRectangle().fill(.regularMaterial) 套着用)、以及 styled-components 模板字符串。实时预览把你的玻璃卡片浮在真实 彩色背景上（一共 8 套, 一键切换）让你直接看到自己的色调和 模糊在艳丽渐变、柔和黄昏、深海军蓝、极简白这几种典型场景下还 撑不撑得住, 不要做完上线才发现"白底上毛玻璃完全看不出"。8 个 手工调过的预设覆盖日常会用到的形状:苹果毛玻璃、磨砂窗、液态 青、低调卡片、暗色玻璃、霓虹紫、iOS 控制中心、纸感淡彩。 浏览器兼容性提示直接告诉你 iOS Safari 14-16 和 macOS Safari 13-15 还需要 -webkit 前缀, 而输出的 CSS 已经把它写上了, 不 用你去记。100% 浏览器本地运算, 分享链接带配置 (整套配置写进 URL), 零网络请求。
工具细节
- 输入
- 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 32 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 生成器 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
毛玻璃 CSS 生成器 适合怎么用
适合快速生成初稿、起步素材或结构化结果,再人工整理后发布。
适合生成任务
- 从空白开始,先拿到一版可修改的结果。
- 生成可重复使用的草稿、名称、模板或占位素材。
- 先探索多个选项,再挑最适合当前任务的。
生成检查项
- 生成内容发给客户、上页面或进文档前,必须人工看过。
- 有品牌语气、格式或受众要求时,不要沿用默认值。
- 只保留真正符合任务的部分。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
用同一套玻璃语言让 iOS App 设置页和 Web 营销站气质统一
iOS App 的设置页用 .regularMaterial 做圆角卡片, Web 这边要 上一张营销页, 设计师要求 "看起来像同一个 App"。直接选 "苹果毛玻璃" 预设, tab 切到 CSS, 复制进营销站的样式表。 这里给的 blur 半径 / 饱和度 / 描边不透明度 / 阴影档位是 按 .regularMaterial 在 iOS 上实际渲染对齐的，视觉重量 一致, 不会再被设计师评审打回 "Web 这版怎么塑料感这么强"。
给 Discord 风格的 mini-app 浮窗做毛玻璃面板
要在一个色彩很满的服务器背景上做一个浮动小工具。选 "液态 青" 预设, 背景切到 "极光" 测最难的场景 (色彩竞争最激烈), 描边 alpha 拉到 0.4 让边缘还看得清, 然后复制 Tailwind class 贴进 React 组件。两分钟搞定, 不用开 PS, 不用导资源, 也 不用担心换个渐变图 PNG 就糊了。
临时给 hackathon 队友演示 SwiftUI Material
要给队友讲 SwiftUI Material 怎么用。选 "iOS 控制中心" 预设, tab 切到 SwiftUI, 直接复制。队友拿到的是一段能 直接编译运行的 RoundedRectangle().fill(.regularMaterial) .overlay(...), 比翻 Apple 文档自己拼 modifier 快得多。
在真正配上 hero 大图之前先测玻璃文字可读性
找到一张橙粉色调的 hero 图。在把卡片放上去之前, 先选 "山景" 背景做模拟 (色相和黄昏接近), 调玻璃颜色 / 不透 明度, 直到标题文字一眼能读。然后就知道:白色玻璃 18% alpha 没问题, 8% alpha 标题就变幽灵了。先把这个调好再 去定 hero 图的裁切, 不要反过来。
审一遍设计系统里散落的毛玻璃卡片
接手了一个 Figma 文件, 里面有 11 张毛玻璃卡片, 不同设计 师调的, 参数各不相同。把每张的 CSS 用滑块 mirror 进 URL 状态, 截图, 排一排。不一致马上看出来，应该一致 的三张卡有三个 blur 半径, 两个 opacity 档差 5%。带着 证据去推动收敛, 比口头喊 "我们要统一" 更有说服力。
让玻璃 CTA 按钮在深色模式下也能用
CTA 按钮是白色玻璃。深色模式下白色玻璃发亮得过头, 但你 希望同一个组件两种模式都能用。"暗色玻璃" 预设给你看 反转 tint 在深色模式下是什么观感, 把两份 Tailwind class 字符串都复制下来, 用深色 media query 切换。一个组件, 两种主题, 两种都做得对。
常见踩坑
忘了写 -webkit-backdrop-filter 前缀, 然后 iOS Safari 14-16 用户看到的是一块纯透明矩形。这工具会同时吐两行, 复制的时候不要只复制无前缀那行。
在纯白底上做玻璃然后吐槽 "毛玻璃完全看不出来"。背后没有色彩, 模糊根本没原料。要么给背景加点纹理 / 渐变, 要么靠描边 + 阴影撑边界。
blur 拉到 24 px 以上同时 saturate 又超过 180 %, iOS Safari 在这种 overdraw 下容易掉帧。两个里挑一个当主轴 (重模糊 OR 重饱和), 老 iPhone 上才能滚得顺。
Tailwind 2.x 项目没开 JIT 就用 bg-[rgba(...)] 任意值 class，编译会报错。任意值 class 要 Tailwind 3.0+ 的 JIT (默认就开)。要么升级, 要么把 rgba() 挪进 tailwind.config 的 colors。
网页这边 blur 写 8 px, SwiftUI 那边随手选了 .ultraThickMaterial。Material 的档比 CSS blur 粗, 按工具给的映射来挑, 不要凭名字感觉走。
隐私说明
所有渲染都在你这个浏览器标签页里完成。卡片配置写进 URL 仅仅 是为了让分享链接能复现同一张卡片 (颜色码、blur、不透明度、 阴影档位、当前背景、当前导出 tab), 不上传图片、不带配置发 analytics、服务器根本不知道你选的玻璃颜色是什么。8 套预览 背景全是 inline CSS 渐变 (不是从 CDN 拉真实照片), 所以这 页完全离线可用, 也不会通过 "图片请求日志" 把你的设计意图 泄露出去。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。