CSS filter 生成器
可视化调节 CSS 滤镜并生成代码,调节在浏览器本地完成,数据不会上传。
滤镜参数
实时预览
使用说明
CSS filter 常用于图片与元素的视觉调整。本工具用滑杆可视化调节,实时预览并生成可直接使用的代码。
- 拖动各参数滑杆,右侧预览会实时变化。
- 点击「复制 CSS」得到 filter 声明,或复制 Tailwind 任意值类。
常见问题
- 生成的代码怎么用?
- 把 filter 声明放到元素的 style 中即可,例如 img { filter: brightness(120%) saturate(150%); }。
- 为什么预览和原图差别明显?
- 预览使用的是示范图,你可以把生成的 filter 应用到自己的图片上查看同样效果。