玻璃拟态生成器

实时预览玻璃拟态效果，一键复制 CSS 代码

效果设置

玻璃底色

#FFFFFF

透明度15%

模糊强度 (blur)10px

饱和度 (saturate)180%

边框透明度30%

圆角16px

阴影强度10%

预览背景

实时预览

CSS

background: rgba(255, 255, 255, 0.15);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.10);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.30);

💡 使用提示

建议透明度 10～25%、模糊 5～15px，效果最佳
已自动加入 Safari 所需的 -webkit-backdrop-filter 前缀
若效果不明显，请确认父容器有彩色背景
饱和度设为 180% 可让玻璃后的颜色更鲜艳

相似CSS 与设计

将代码转成美观的分享图片，支持多种主题

可视化设计线性、放射、圆锥渐变，即时复制 CSS 代码

打开 →

Box Shadow 生成器

交互式调整阴影效果，实时预览 CSS 输出

打开 →

💬 用户留言

还没有留言，抢先留下你的想法！

什么是玻璃拟态生成器？

调整透明度、模糊、饱和度与边框等参数，实时预览毛玻璃（Glassmorphism）卡片效果，并复制包含 backdrop-filter 的 CSS 代码。

如何使用？

左侧“效果设置”有 6 个滑块（透明度、模糊强度、饱和度、边框透明度、圆角、阴影强度）和玻璃底色选色器，全部实时反映在右侧预览卡片上。
“透明度”建议设为 10～25%，“模糊强度”建议设为 5～15px，这两个参数对毛玻璃质感影响最大。
将饱和度调高到 180% 可让玻璃后方的颜色更鲜艳；边框透明度可为玻璃卡片添加隐约的高光边缘。
点击下方 6 个背景色块（Purple／Ocean／Sunset 等）切换预览场景，确认在不同背景下的效果。
点击“复制 CSS”即可获得完整的 CSS，已自动加入 backdrop-filter 与 -webkit-backdrop-filter（兼容 Safari），可直接粘贴到项目中使用。

常见问题

玻璃拟态效果是如何实现的？

使用 backdrop-filter: blur() 模糊背景，再配合半透明的 background-color 和细边框来营造玻璃质感。

生成的 CSS 在所有浏览器中都支持吗？

Chrome、Edge、Safari 支持良好；Firefox 需启用实验功能，建议加上 -webkit- 前缀。

可以实时预览效果吗？

可以，调整任何滑块或颜色时，预览区域都会实时更新。