Elysia Tools
导航
Design
生成 CSS 背景滤镜属性，实现毛玻璃效果
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
CSS 背景滤镜生成器是一款高效的在线工具，旨在帮助开发者快速生成 `backdrop-filter` 属性，通过调整模糊、亮度、对比度及饱和度等参数，轻松实现现代 UI 设计中流行的毛玻璃（Glassmorphism）视觉效果。
背景
正在开发一个个人作品集网站，希望卡片组件具有现代感。
问题
手动编写 CSS 滤镜参数繁琐且难以直观预览效果。
如何使用
调整模糊度至 15px，背景不透明度设为 0.2，对比度微调至 110%。
backdrop-filter: blur(15px) brightness(100%) contrast(110%); background: rgba(255, 255, 255, 0.2);结果
生成了简洁的 CSS 代码，卡片呈现出优雅的半透明磨砂质感。
它是 CSS 的一个属性，允许你为元素背后的区域应用图形效果，如模糊或颜色偏移，常用于实现毛玻璃效果。
该属性在现代主流浏览器中支持良好，但在旧版浏览器中可能需要添加厂商前缀或进行兼容性降级处理。
建议将模糊值设置在 10px-20px 之间，并配合较低的背景不透明度（如 0.2-0.3）以及浅色半透明背景。
不支持，该工具专注于生成 CSS 代码片段，方便开发者直接集成到项目中。
背景不透明度控制元素本身的透明度，而 backdrop-filter 仅影响元素背后的内容，不影响元素内部的文字或图像。