CSS filter 滤镜生成器能做什么？
CSS filter 属性给元素加图像滤镜：模糊、亮度、对比度、饱和度、灰度、复古色调……效果等同 Instagram 滤镜，但直接作用于网页元素且一行 CSS 搞定。本工具滑块调节各参数，实时预览，一键复制代码，还能给文字、卡片、视频加滤镜效果。
使用步骤
- 打开 CSS filter 滤镜生成器
- 上传图片或使用示例图预览
- 拖动滑块调节：模糊 blur、亮度 brightness、对比度 contrast、饱和度 saturate、灰度 grayscale、复古 sepia、色相 hue-rotate、反色 invert
- 叠加多个滤镜（可组合使用）
- 选择预设：黑白、复古、鲜艳、梦幻
- 复制 CSS 代码应用到 img、div、video 等元素
参数详解
- blur(4px)：高斯模糊，值越大越糊；做毛玻璃背景常用 blur(20px)
- brightness(1.2)：亮度，1 为原样，>1 变亮、<1 变暗
- contrast(1.1)：对比度，>1 反差更强
- saturate(1.5)：饱和度，>1 鲜艳、0 为灰度
- grayscale(1)：完全黑白，0-1 渐变过渡
- sepia(0.6)：复古褐色调
- hue-rotate(90deg)：色相旋转，做创意变色
- drop-shadow(...)：沿透明轮廓投影（与 box-shadow 不同）
使用示例
- 图片墙：默认灰度，悬停变彩色（grayscale(1) → grayscale(0)），经典交互
- 背景氛围图：blur + 亮度降低，衬托前景文字
- 视频播放：播放时正常、暂停时灰度，状态可视化
- 暗色模式：invert + hue-rotate 一键生成暗色主题（实验性）
- 品牌统一：不同来源图片统一 saturate + contrast 参数，视觉协调
注意事项与边界情况
- filter 作用于元素自身（含内容和背景），backdrop-filter 才是模糊背后画面
- drop-shadow 跟随透明轮廓，PNG 抠图效果远好于 box-shadow
- 滤镜动画性能：对 filter 过渡动画会触发重绘，大面积元素慎用
- 滤镜组合顺序影响结果：先灰度再色相旋转与反过来效果不同
- 打印时部分滤镜不生效，请测试打印效果
常见问题
- 能同时用多个滤镜吗？
- 可以，空格分隔：filter: blur(2px) brightness(1.2) saturate(1.3); 顺序影响效果。
- 怎么做出悬停变色效果？
- CSS 过渡：filter: grayscale(1); transition: filter .3s; 悬停时改 grayscale(0)。
- blur 和 drop-shadow 能混用吗？
- 能，但先 blur 再投影与先投影再 blur 效果不同，按需排序。
- 视频能加滤镜吗？
- 可以，filter 对 img、video、div 等任意元素生效。
- 滤镜影响性能吗？
- 静态滤镜影响小；动态大面积滤镜（特别是 blur）在低端机上要留意。
实战案例：给 Banner 图做暗化遮罩替代
需求：Banner 上的白字看不清，传统做法叠一层半透明黑。用 filter: brightness(0.7) 更干净——亮度是乘法运算：像素 200×1.2=240、220×1.2 本该是 264 但封顶 255、255×1.2 同样封顶 255。想提亮用大于 1 的系数、压暗用小于 1 的，乘法封顶 255 就是这套运算的恒等规律，理解了就能预判高光会不会死白。
常见错误
- 滤镜之间顺序写反：grayscale(1) brightness(1.2) 与 brightness(1.2) grayscale(1) 结果不同
- 拿 filter: blur 去模糊背景：那是模糊元素自身，背景要用 backdrop-filter
- PNG 抠图用 box-shadow 投影变成方块阴影：改用 drop-shadow 跟随轮廓
- 大面积 blur 做动画：低端机掉帧，动 opacity 更划算
进阶方向
- 悬停变彩色的图片墙：grayscale(1) 加 transition 0.3s，交互成本极低效果极好
- SVG 滤镜（feColorMatrix）能做出 CSS 滤镜做不到的通道级调色
- 对比度自查配合 filter 一起用：调暗后跑一遍 4.5:1 检查
- Canvas/WebGL 层的滤镜性能更优，适合视频实时处理
总结
CSS filter 是「网页版修图软件」：一个属性搞定模糊、调色、黑白、复古。善用预设、组合参数、注意性能，图片的表现力立刻翻倍。