素材阁

CSS filter 生成器

可视化调节 CSS 滤镜并生成代码,调节在浏览器本地完成,数据不会上传。

滤镜参数

实时预览

使用说明

CSS filter 常用于图片与元素的视觉调整。本工具用滑杆可视化调节,实时预览并生成可直接使用的代码。

  1. 拖动各参数滑杆,右侧预览会实时变化。
  2. 点击「复制 CSS」得到 filter 声明,或复制 Tailwind 任意值类。

常见问题

生成的代码怎么用?
把 filter 声明放到元素的 style 中即可,例如 img { filter: brightness(120%) saturate(150%); }。
为什么预览和原图差别明显?
预览使用的是示范图,你可以把生成的 filter 应用到自己的图片上查看同样效果。

延伸阅读

相关工具