CSS背景滤镜生成器 - backdrop-filter可视化工具
生成毛玻璃、模糊等backdrop-filter效果。支持实时预览、预设效果和一键复制CSS代码。
效果预览
毛玻璃效果
Backdrop Filter 可以让元素背后的内容产生模糊等滤镜效果。
CSS代码
.glass-effect {
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
background: rgba(255, 255, 255, 0.30);
}滤镜设置
预设效果
# 什么是 CSS backdrop-filter？
CSS backdrop-filter 属性允许您为元素背后的区域（背景）添加图形效果，如模糊、颜色偏移等。 这使得创建"毛玻璃"效果变得非常简单，是现代UI设计中常用的技术。 backdrop-filter 与 filter 的区别在于，filter 应用于元素本身，而 backdrop-filter 应用于元素背后的内容。
backdrop-filter 常用于创建导航栏、模态框、卡片等元素的背景效果， 让用户可以看到后面的内容，但同时又能够保持前景内容的可读性。
# 常用 backdrop-filter 函数
- blur(px): 高斯模糊，最常用于毛玻璃效果
- brightness(%): 背景亮度调整
- contrast(%): 背景对比度调整
- saturate(%): 背景饱和度调整
- grayscale(%): 背景灰度转换
- hue-rotate(deg): 背景色相旋转
- invert(%): 背景反色效果
- opacity(%): 背景透明度
# 浏览器兼容性
backdrop-filter 在现代浏览器中得到良好支持，但需要添加 -webkit- 前缀以支持 Safari。 在使用时，建议同时添加 -webkit-backdrop-filter 和 backdrop-filter 两个属性。 某些旧版浏览器不支持此属性，建议提供降级方案。
# 常见问题 (FAQ)
为什么 backdrop-filter 没有效果？
backdrop-filter 需要元素本身具有半透明背景才能看到效果。 确保元素的 background 是半透明的，如 rgba(255, 255, 255, 0.3) 或使用 opacity。 如果背景是完全不透明的，您将看不到 backdrop-filter 的效果。
backdrop-filter 会影响性能吗？
是的，backdrop-filter 可能会影响性能，特别是在移动设备上。 它会触发合成层的创建，增加内存使用。 建议谨慎使用，避免在大面积或多个元素上同时使用 backdrop-filter。
如何创建经典的毛玻璃效果？
经典的毛玻璃效果通常使用 blur(10px-20px) 并配合半透明的白色背景。 例如：backdrop-filter: blur(16px); background: rgba(255, 255, 255, 0.3); 可以根据需要调整模糊程度和背景透明度来达到理想效果。