CSS Filter Generator

关于本工具

CSS滤镜生成器允许您可视化调整9个CSS滤镜函数——blur、brightness、contrast、grayscale、hue-rotate、invert、opacity、saturate和sepia——并实时查看组合效果。默认值的滤镜会自动从输出中排除。

CSS滤镜可对图像、背景、文本等HTML元素应用类似图片编辑软件的视觉效果。它们使用GPU加速，所有处理均在浏览器中完成。

使用方法

1. 拖动任意滑块以应用该滤镜效果。
2. 组合多个滤镜——预览实时更新。
3. 默认值的滤镜会自动从输出中排除。
4. 点击"重置全部"恢复默认值。
5. 点击"复制"复制CSS filter属性。

使用场景

设计师使用grayscale和sepia滤镜为图像创建一致的单色UI区域。开发者使用blur创建磨砂玻璃背景。brightness常用于悬停效果。深色模式实现中使用invert滤镜。

常见问题

• filter和backdrop-filter有什么区别？ — filter应用于元素本身及所有子元素。backdrop-filter仅应用于元素后面的区域（适合磨砂玻璃遮罩）。
• 可以组合多个滤镜吗？ — 可以。在filter属性中用空格分隔列出。此工具自动完成。
• CSS滤镜影响性能吗？ — grayscale和brightness等简单滤镜开销很小。blur开销较大，特别是大面积区域——在移动端慎用。