CSS Filter 生成器

输出的写法与函数顺序

生成的代码为 .element 类设置 filter 属性。把 .element 换成自己的选择器，就能用在图片、div、canvas、video 或伪元素上。工具总是按滑块的顺序写出函数：blur、brightness、contrast、grayscale、hue-rotate、invert、opacity、saturate、sepia，预览也用同一个字符串。浏览器按书写顺序依次应用，前一个函数的结果是后一个函数的输入，所以 blur(2px) brightness(120%) 是先模糊再提亮；需要别的顺序时，复制后手动调整。

示例：全站灰度

只把「灰度」调到 100，其余保持默认，工具写出：

.element {
  filter: grayscale(100%);
}

要让整个页面变成黑白，把选择器换成 html。选 html 而不是 body 是有原因的：Filter Effects Level 1 规定，filter 不为 none 时，元素会成为绝对定位和固定定位后代的包含块，「unless the element it applies to is a document root element in the current browsing context」（§5）。根元素 html 不受这条影响；写在 body 上时，吸顶导航、「回到顶部」按钮这类 position: fixed 元素会以 body 为包含块，不再相对视口固定。撤掉灰度时删除这条规则即可，或者把值改成 none。

示例：售罄商品的图片

商品列表里，售罄的商品常用变灰、变淡的图片表示。把「灰度」调到 100、「不透明度」调到 60：

.element {
  filter: grayscale(100%) opacity(60%);
}

把这条规则写在商品图片的 img 上，不要写在整张卡片上。滤镜作用于元素和它的全部子元素，写在卡片上时，「已售罄」字样和价格也会一起变灰、变淡。灰度本身只是视觉提示，「已售罄」仍要用文字写出来。

限制

• 可调范围：模糊 0–20px（步长 0.1px），亮度、对比度、饱和度 0–200%，色相旋转 0–360deg，其余 0–100%。规范允许更大的值：亮度、对比度、饱和度没有上限，灰度、反转、不透明度、褐色（sepia）超过 100% 时浏览器按 100% 处理；需要时在复制后的 CSS 里手动改。
• 不提供 drop-shadow() 和引用 SVG 滤镜的 url()。要模糊玻璃面板背后的内容，用的是 backdrop-filter；filter: blur() 模糊的是元素自身，包括其中的文字。
• 预览图片最大 5 MB（5,242,880 字节）。超过上限、不是图片、或当前浏览器无法解码的文件（0 字节的文件、改名为 .png 的文本、浏览器不支持的 HEIC 等）不会载入，状态行会说明原因，预览保留原来的图片。浏览器报告为图片类型、或文件名以常见图片扩展名结尾才算图片，所以没有扩展名的图片文件也会被拒绝。
• 九项数值保存在本浏览器中；图片不保存。

常见应用场景

CSS 滤镜常用于图片悬停效果（平时去饱和、悬停时恢复彩色）、深色模式下的截图适配（反转加色相旋转）、加载中的占位图（灰度加亮度）以及褐色、高对比度一类的照片风格。模糊元素背后的内容（毛玻璃效果）要用 backdrop-filter。