CSS 滤镜
可视化调节 blur、brightness、contrast、drop-shadow、grayscale、hue-rotate、invert、opacity、saturate、sepia，叠加多个滤镜、调整顺序、套用复古/黑白/高对比/霓虹预设，实时预览并复制 filter 代码。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
预设
滤镜链
滤镜按从上到下的顺序依次作用，顺序不同结果可能不同
实时预览
左侧是原图，右侧应用了当前滤镜链
生成的代码
.filtered {
filter: blur(3px) saturate(1.2);
}这个工具能做什么
- 给图片或卡片加毛玻璃、投影、灰度等效果时，先在这里调好数值，再把生成的 filter 声明复制进样式表。
- 做「悬停变亮」「禁用态变灰」这类状态样式：调好 brightness / grayscale 的数值，直接拿去写 :hover 或 .is-disabled。
- 需要多个滤镜叠加时（例如先模糊再提高饱和度），可以拖动顺序对比效果，避免手写时漏掉顺序带来的差异。
- 想快速做出复古、黑白、高对比、霓虹的图片风格，套用预设再微调比从零试数值快得多。
示例
输入
滤镜链：blur 3px、saturate 1.2，选择器 .filtered
输出
.filtered {
filter: blur(3px) saturate(1.2);
}滤镜按列表顺序依次作用，blur(3px) saturate(1.2) 和 saturate(1.2) blur(3px) 的渲染结果可能不同。
常见问题
滤镜数值的取值范围是多少？
按 CSS Filter Effects 规范：blur 是长度（0–20px 比较常用）、hue-rotate 是角度（0–360deg），brightness / contrast / saturate 的无单位数值 1 表示原样、0 到 3 足够覆盖调亮调暗，grayscale / invert / opacity / sepia 是 0–1 的比例。超出区间的值工具会直接报错，避免写出被浏览器忽略的声明。
多个滤镜的书写顺序会影响结果吗？
会。滤镜链按书写顺序从左到右依次作用，前一个的输出是后一个的输入。例如先 blur 再 brightness 会把模糊后的像素整体调亮，反过来则是先调亮再模糊，边缘过渡会不一样。
filter 和 backdrop-filter 有什么区别？
filter 作用于元素自身及其子元素，元素背景和内容一起被处理；backdrop-filter 只处理元素背后的内容，常用于半透明导航栏的毛玻璃效果。这里的数值可以直接搬到 backdrop-filter，但要注意它需要元素自身半透明才能看出效果。
drop-shadow 和 box-shadow 该用哪个？
box-shadow 永远按元素盒子（矩形）投影，透明 PNG 或文字会露出方框；drop-shadow 跟随实际渲染出来的不透明像素轮廓，适合图标和异形图形。代价是 drop-shadow 更耗性能，大面积动画时要谨慎。
滤镜会影响性能吗？
会。滤镜通常触发 GPU 合成，静态使用几乎无感，但对大面积元素做动画、或者叠加多个模糊滤镜时容易掉帧。建议把滤镜作用在小元素上，需要动画时配合 will-change 或改用预先处理好的图片。
关键词：css filterfilter generatorblurdrop-shadowgrayscalehue-rotatesepiaCSS 滤镜滤镜生成器图片特效饱和度前端特效