可以用于背景图吗？

可以，filter 可作用于任何元素，包括带 background-image 的元素。如果只想模糊元素背后的背景而不影响内容，应使用 backdrop-filter。

filter 会影响性能吗？

复杂或带动画的滤镜，尤其是大面积 blur，可能增加渲染开销。正式上线前应在目标设备上测试。

每个函数都会作用在前一个函数处理后的结果上，所以 grayscale(100%) sepia(50%) 可能和反过来不同。这个工具使用固定且常见的顺序。

用实时滑块生成 CSS filter 声明

用滑块调整 blur、brightness、contrast、grayscale、hue-rotate、invert、opacity、saturate 和 sepia，实时预览组合效果，并复制生成的 CSS filter 声明。

模糊（blur） 0px亮度（brightness） 100%对比度（contrast） 100%灰度（grayscale） 0%色相旋转（hue-rotate） 0deg反相（invert） 0%不透明度（opacity） 100%饱和度（saturate） 100%褐色（sepia） 0%

输出

filter: none;

本页的所有处理都在浏览器中完成，不会上传任何内容。

CSS filter 属性可以直接在浏览器中给元素添加模糊和颜色调整效果，不需要修改原图。多个函数组合起来手写很容易漏单位或顺序混乱，这个工具会根据滑块生成声明，并只包含你实际调整过的效果。

本工具完全在你的浏览器中运行。输入的内容不会被上传、保存或分享，关闭标签页即随之消失。

可以用于背景图吗？: 可以，filter 可作用于任何元素，包括带 background-image 的元素。如果只想模糊元素背后的背景而不影响内容，应使用 backdrop-filter。
filter 会影响性能吗？: 复杂或带动画的滤镜，尤其是大面积 blur，可能增加渲染开销。正式上线前应在目标设备上测试。
为什么滤镜函数顺序重要？: 每个函数都会作用在前一个函数处理后的结果上，所以 grayscale(100%) sepia(50%) 可能和反过来不同。这个工具使用固定且常见的顺序。