CSS 滤镜生成器

拖动滑块调整模糊、亮度、对比度、灰度、色相旋转、反色、不透明度、饱和度与复古等滤镜,上方实时预览效果,下方自动生成标准 filter 样式代码,一键复制即可用于你的项目。

滤镜参数 默认状态

勾选左侧复选框启用某项滤镜,或直接拖动滑块(会自动启用)。未启用的滤镜不会出现在生成代码中。

实时预览与代码
预览色块
启用项数0
滤镜函数无

          

生成的 filter 样式将显示在这里。

说明
  • CSS filter 属性按声明顺序依次应用各个滤镜函数,多个函数之间以空格分隔。
  • 百分比类滤镜中,100% 表示保持原样,0% 表示该效果的极值。
  • hue-rotate 单位为 deg,取值为 0-360 度;blur 单位为 px。
  • 当未启用任何滤镜时,生成的声明为 filter: none;。
  • 本工具完全在浏览器本地运行,输入的数据不会上传到任何服务器。