实时预览
毛玻璃卡片
Glassmorphism 效果展示，调整右侧参数查看变化
Glassmorphism 毛玻璃效果生成器
Glassmorphism 毛玻璃效果生成器：调节模糊度、透明度、背景色与边框圆角，实时预览磨砂玻璃卡片效果并生成对应 backdrop-filter CSS 代码。免费在线使用，浏览器本地运行，无需安装。
CSS 代码
背景设置
毛玻璃效果
边框设置
阴影设置
启用阴影
Glassmorphism 毛玻璃效果生成器：调节模糊度、透明度、背景色与边框圆角，实时预览磨砂玻璃卡片效果并生成对应 backdrop-filter CSS 代码。免费在线使用，浏览器本地运行，无需安装。
Glassmorphism 效果展示，调整右侧参数查看变化
先填写或调整「模糊程度 10px」、「透明度 0.25」、「边框宽度 1px」、「边框透明度 0.18」、「圆角 16px」、「水平偏移 0px」；修改输入或使用页面控件后查看结果区域。
「模糊程度 10px」的输入范围为 0～30。「透明度 0.25」的输入范围为 0～100。「边框宽度 1px」的输入范围为 0～5。请按字段标注的单位输入，先检查超出范围、空值和小数点，再核对结果。
先用最小示例验证，再将结果放回实际开发环境检查。语言版本、运行环境、编码和配置项可能与浏览器中的处理规则不同。
本页的主要处理逻辑在浏览器内执行。页面加载资源、打开外部链接，以及带外部地址的内容预览仍可能产生网络请求；“本地处理”并不表示整个网页完全没有网络活动。
先检查「模糊程度 10px」、「透明度 0.25」、「边框宽度 1px」是否完整，以及格式、单位和当前选项是否匹配。修改输入后，查看页面的结果或错误提示；可先用少量数据定位问题。
CSS Filter 生成器 · CSS 格式化 · Box Shadow 生成器 · CSS 动画生成器 · 全部开发工具