CSS滤镜在线生成工具 - 免费filter/blur/亮度/对比度
组合调节 8 种 CSS 滤镜参数，实时预览并生成代码。
Yeo 工具箱
什么是CSS 滤镜？
CSS filter 属性可以为元素应用模糊、亮度、对比度、灰度、怀旧、饱和度、色相旋转、反相等视觉效果，多个滤镜可以空格组合。它是实现图片特效和交互反馈的常用手段。
Yeo工具箱的 CSS 滤镜工具提供 8 个参数滑块和一键常用预设，实时预览组合效果并生成标准 filter 代码，适合前端开发快速调出想要的照片风格。
如何使用Yeo工具箱的CSS 滤镜？
- 拖动模糊、亮度、对比度等滤镜滑块
- 可一键套用黑白、怀旧等常用预设
- 预览区实时显示滤镜组合效果
- 一键复制生成的 filter CSS 代码
常见使用场景
- 场景1：图片 hover 时的黑白转彩色效果
- 场景2：弹窗背景的模糊遮罩
- 场景3：老照片风格的怀旧滤镜
- 场景4：商品图批量统一色调
使用小贴士
- 滤镜组合有顺序，先灰度再怀旧与先怀旧再灰度效果不同
- 大范围 blur 在低端设备上较耗性能，动画中慎用
常见问题
Q1: filter 和 backdrop-filter 有什么区别？
filter 作用于元素自身内容，backdrop-filter 作用于元素背后区域（毛玻璃效果）。两者可以组合使用。
Q2: 滤镜会影响文字清晰度吗？
blur 会模糊包括文字在内的全部内容，亮度对比度不影响清晰度。需要只模糊背景时请用 backdrop-filter。
Q3: 浏览器兼容性如何？
现代浏览器均支持 filter 属性，老版本 Safari 需要 -webkit-filter 前缀。多滤镜用空格分隔，顺序会影响最终效果。
更新日志
- 2026-08-04 更新：Yeo工具箱 CSS 滤镜工具正式上线
⚠ 声明：本工具所有数据处理均在您的浏览器本地完成，数据不会被上传到任何服务器。