ZeroTool Workbench
CSS Filter 生成器
可视化生成 CSS filter 滤镜效果。滑块调节模糊、亮度、对比度、灰度、色相旋转、反转、不透明度、饱和度、褐色，支持上传自定义图片实时预览，一键复制 CSS。免费在线工具。
用微信扫描以下二维码即可分享
使用方法
- 调节九个滑块中的任意一个——模糊、亮度、对比度、灰度、色相旋转、反转、不透明度、饱和度和褐色——预览图片将实时显示效果。
- 点击上传图片，将默认预览图替换为您自己的图片（JPEG、PNG、WebP、SVG 或浏览器支持的任意格式，最大 5 MB）。图片完全在浏览器本地处理，不会上传到服务器。
- 使用每个滑块旁的重置按钮，将单个滤镜恢复为默认值，不影响其他滑块。点击全部重置一次性还原所有滑块。
- 点击复制按钮获取生成的 CSS。输出仅包含与默认值不同的滤镜函数——全部为默认值时输出
filter: none;。
生成 CSS 说明
生成的代码为 .element 类设置 filter 属性。将 .element 替换为您自己的选择器，
并将声明应用到任意 HTML 元素——图片、div、canvas、video 或伪元素均可。滤镜函数按顺序求值，
因此 blur(2px) brightness(120%) 会先模糊再提亮，与函数顺序颠倒时的效果略有不同。
常见应用场景
CSS 滤镜广泛应用于：图片悬停效果（悬停前去饱和，悬停后全彩）、深色模式图片适配（反转 + 色相旋转）、 加载骨架屏（灰度 + 亮度）、毛玻璃卡片背景（对背景应用模糊）以及风格化摄影效果（褐色、高对比度）。 由于滤镜在 GPU 上运行，即使对大图片或复杂布局也能保持流畅性能。
FAQ
CSS filter 属性是什么？
CSS filter 属性为元素应用图形效果，例如模糊、色彩偏移和亮度调整。它接受以空格分隔的滤镜函数列表：blur()、brightness()、contrast()、grayscale()、hue-rotate()、invert()、opacity()、saturate() 和 sepia()。滤镜按从左到右的顺序合成，在大多数浏览器上均经过硬件加速。
为什么输出会省略默认值的滤镜函数？
以默认值引入滤镜函数（如 brightness(100%) 或 blur(0px)）不会产生视觉效果，只会增加不必要的代码体积。本生成器仅输出与默认值不同的函数，保持 CSS 精简。当所有滑块均为默认值时，输出为 filter: none;，明确移除任何继承的滤镜。
如何将滤镜应用到页面上的图片？
复制生成的 CSS，将 filter 属性添加到目标元素的规则集中。例如：img { filter: blur(4px) brightness(120%); }。也可以对非图片元素（如 div 或 section）应用滤镜——效果会以单一合成图层渲染元素及其所有子元素。
CSS 滤镜可以做动画吗？
可以。CSS 滤镜支持过渡和关键帧动画。在元素上使用 transition: filter 0.3s ease;，然后通过 hover、focus 或 JavaScript 修改 filter 值。只要起始和结束状态包含相同的滤镜函数，所有九个函数均支持平滑插值。
filter: opacity() 与 CSS opacity 属性有何区别？
对单个元素而言，两者视觉效果相同。主要区别在于：CSS opacity 属性会创建新的层叠上下文，将元素及其所有后代作为一个整体处理；而 filter: opacity() 是滤镜链的一部分，会与其他滤镜按顺序合成，适合在单个属性值中组合多种效果。