CSS 滤镜生成器

CSS 滤镜生成器让你可视化地构建并组合 CSS filter 效果，配合实时图片预览，无需再凭感觉猜数值。调整模糊、亮度、对比度、色彩等参数，再把生成好的 filter 属性直接复制进样式表。

它专为想快速调出图片与悬停效果、又不想反复「改—存—刷新」的前端开发者和设计师打造。每个标准滤镜函数都配有独立的滑块和数值输入框，十款现成预设还能让你从一种打磨好的风格起步。

隐私无忧：预览画面和你上传的任何图片都完全在浏览器本地处理，绝不会上传到服务器，图片始终留在你自己的设备上。

CSS 滤镜生成器使用方法

拖动任意滑块改变某个滤镜，或在它的数值输入框里填入精确数字。图片预览和生成的 CSS 都会随之实时更新。

点击某个预设缩略图——例如复古、黑白或强烈——套用一种成品风格，再以此为基础微调各个滤镜。

用每个滤镜的复选框来开启或关闭它，且不会丢失已设的数值；长按眼睛按钮，即可瞄一眼未加滤镜的原图。

完整的 filter 属性会显示在预览下方。点击复制把它送入剪贴板，即可粘贴到你的样式表里。

全面掌控模糊、亮度、对比度、灰度、色相旋转、反相、不透明度、饱和度和棕褐，每个都配有独立的滑块和数值输入框。

每次改动都立刻应用到一张真实图片上，无需写代码、保存再刷新。

可从原图、复古、黑白、暖色、冷色、强烈、褪色、高对比、梦幻或反相起步，每款都以缩略图形式预览。

用复选框启用或停用任意滤镜，单独查看并对比它的效果，且不会丢失你设好的数值。

长按眼睛按钮查看原图，松开即回到加滤镜后的画面。鼠标和触屏均可使用。

加载自己的图片，在真实素材上预览滤镜效果。图片在浏览器本地读取，绝不会上传。

重置按钮会把每个滤镜还原为默认值，让你随时重新调一种新效果。

生成的 filter 属性会实时更新，点击一下即可复制到剪贴板。

内置深色主题和自适应布局，让这款工具在桌面和手机上都用得顺手。

它涵盖九个标准 CSS 滤镜函数：blur()、brightness()、contrast()、grayscale()、hue-rotate()、invert()、opacity()、saturate() 和 sepia()。

你可以同时调整任意多个滤镜。CSS 的 filter 属性支持链式书写多个函数，本工具会自动把它们写进一条合并的 filter 声明里。

调高模糊滑块，它对应以像素为单位的 filter: blur()（这里最高 20px）。一边看预览，一边复制生成的属性——例如 filter: blur(4px);。

把灰度滑块设为 100%，会生成 filter: grayscale(100%);，得到完全的黑白图片。介于其间的数值则是部分去色。「黑白」预设把它和对比度增强结合在了一起。

预设是预先设定好的滤镜组合，用来打造各种流行风格。比如「复古」就把棕褐和调整过的亮度、对比度、饱和度混在一起。先套用一种作为起点，再按喜好微调各个滤镜即可。

不会。当你上传图片时，它会用浏览器的 FileReader 在本地读取，并只显示在预览中。图片绝不会离开你的设备，也不会被上传到任何地方。

点击预设面板里的重置按钮，即可把每个滤镜还原为默认值，让图片回到没有任何效果的状态。

CSS 的 filter 属性在所有现代浏览器中都能用，包括 Chrome、Firefox、Safari 和 Edge，所以你在这里复制的代码可以放心上线。