CSS 滤镜生成器

CSS 的 filter 属性无需编辑文件，就能给任何元素、图片或视频加上照片式效果：模糊、亮度、对比度、灰度、棕褐色、色相旋转、反相和投影。这个生成器通过滑块或预设生成属性值，并在你的浏览器里用示例画面预览。第二种模式解决常见的问题“怎样用 CSS 把这个黑色 SVG 图标变成 #2563EB”：它搜索一条能把黑色变成你指定颜色的滤镜链，并报告接近程度。

使用方法

1. 选择“构建滤镜”并设置数值，或选一个预设，例如黑白或复古。
2. 需要时，可添加沿内容轮廓的投影。
3. 要给图标换色，请切换到“把黑色图标换色”，输入目标颜色，并保持“先把图标变黑”开启。
4. 复制 CSS；在换色模式下，请查看色差，高于 2 时换一个种子再试。

计算公式

brightness: C′ = C × b · contrast: C′ = (C − 0.5) × c + 0.5 · invert: C′ = i + C × (1 − 2i) · sepia, saturate, hue-rotate: 3 × 3 color matrices from the Filter Effects spec

C 是 0 到 1 之间的通道值，每一步的结果都限制在 0–1。换色求解器从黑色出发计算这些公式，对 invert、sepia、saturate、hue-rotate、brightness 和 contrast 使用同时扰动随机逼近（带种子的随机搜索），并以 RGB 与 HSL 的差异打分。

示例

默认值得到 filter: brightness(110%) contrast(120%) saturate(130%);，照片更鲜明。黑白预设是 grayscale(100%) contrast(110%)。对于白色图标，求解器能找到几乎没有误差的滤镜链，因为只用 invert(100%) 就能把黑色变成白色；对于蓝色 #2563EB，种子为 1 时色差在 ΔE 2 以内，在图标尺寸下几乎看不出来。