CSS滤镜生成器

什么是CSS滤镜生成器？

如何使用CSS滤镜生成器

1. 1

   上传测试图：点击『上传图片』按钮选择你本地要调整滤镜效果的图片上传，也可以直接使用工具内置的默认示例图开始调试，无需额外准备素材。

2. 2

   调整滤镜参数：在参数面板找到你想要调整的滤镜项目，拖动该项目的滑块修改参数数值，右侧预览区会同步更新显示调整后的效果。

3. 3

   组合多种滤镜：勾选你需要启用的滤镜选项，每个开启的滤镜参数都会生效，多个滤镜的效果会逐层叠加，生成你需要的复合视觉效果。

4. 4

   复制最终代码：调整完成后，找到下方的代码输出区域，选中已经自动生成好的完整CSS滤镜代码，复制后就可以粘贴到你的项目中使用。

什么场景会用到？

计算示例

注意事项

• 本工具生成的滤镜是CSS标准滤镜，仅支持应用在支持CSS滤镜的现代浏览器上，IE9及更早版本不支持。
• 调整多个滤镜时参数需要按顺序书写，CSS不支持同名滤镜重复生效，调整顺序会改变最终叠加效果。
• 本工具仅生成滤镜属性代码，如需兼容旧版webkit浏览器，可自行添加-webkit-filter前缀。
• blur滤镜的参数单位是px，不添加单位将导致代码失效，其它百分比滤镜需要添加%单位。

常见问题

参考资料

• W3C CSS Filter Effects Module Level 1 规范

本页内容遵循W3C CSS滤镜规范，示例代码已经过浏览器实际运行验证，工具集设计组维护。