CSS 滤镜生成器

在线 CSS 滤镜生成器,可视化调节模糊、亮度、对比度、灰度、反相、饱和度、色相旋转等 filter 效果,实时预览并复制生成代码;浏览器本地运行,免费无需安装。

滤镜控制

预设效果

Preview

📷 点击上传自定义图片,或拖拽图片到此处

原图
Original
效果
Filtered

CSS 代码

filter: none;

CSS 滤镜生成器常见问题

CSS 滤镜生成器怎么使用?

先选择符合 image/* 的文件;修改输入或使用页面控件后查看结果区域。

输入数值有哪些范围或单位要求?

「模糊 (blur) 0px」的输入范围为 0~20,控件步长为 0.5。「亮度 (brightness) 100%」的输入范围为 0~200。「对比度 (contrast) 100%」的输入范围为 0~200。请按字段标注的单位输入,先检查超出范围、空值和小数点,再核对结果。

CSS 滤镜生成器的结果应怎样理解?

先用最小示例验证,再将结果放回实际开发环境检查。语言版本、运行环境、编码和配置项可能与浏览器中的处理规则不同。

输入内容会保存或发给外部服务吗?

本页的主要处理逻辑在浏览器内执行。页面加载资源、打开外部链接,以及带外部地址的内容预览仍可能产生网络请求;“本地处理”并不表示整个网页完全没有网络活动。

没有结果或操作失败时先检查什么?

先检查「模糊 (blur) 0px」、「亮度 (brightness) 100%」、「对比度 (contrast) 100%」是否完整,以及格式、单位和当前选项是否匹配。修改输入后,查看页面的结果或错误提示;可先用少量数据定位问题。

相关工具

CSS 格式化 · Box Shadow 生成器 · CSS 动画生成器 · Css Animation · 全部开发工具