这个工具是什么
CSS Filter Generator 控制模糊、亮度、对比、灰度、色相旋转、反相、透明度、饱和度和褐色效果。预览使用页面内置的可视元素，不会请求远程图片。
如何使用
- 拖动滑块或输入数值调节滤镜。
- 观察预览中颜色、边缘和透明度的实时变化。
- 复制生成的 filter 声明。
- 点击“重置”恢复所有默认值，此时输出 filter: none。
使用示例
- grayscale(100%) 可以显示完整灰度效果。
- brightness(120%) 可增加亮度，brightness(100%) 保持原值。
- blur(2px) 模糊边缘，opacity(50%) 让元素半透明。
filter: blur(2px) brightness(120%) contrast(110%) saturate(130%);
filter: none;原理与 CSS 说明
CSS filter 按声明顺序把显示效果应用到渲染后的元素。默认值为 blur 0px、brightness 100%、contrast 100%、grayscale 0%、hue-rotate 0deg、invert 0%、opacity 100%、saturate 100%、sepia 0%。默认项可省略，全部默认时输出 none。
常见用途
- 比较卡片、插图或图像的滤镜风格。
- 为悬停态和主题效果准备 CSS。
- 理解多个 filter 函数组合后的显示变化。
隐私说明
所有输入、计算、CSS 生成和预览都在当前浏览器中完成，不会上传用户内容，不使用后台、数据库、在线 API 或第三方 CDN，也不会自动保存您的输入。
FAQ
CSS filter 是什么？
它是浏览器的视觉效果属性，可对元素应用模糊、亮度、色彩和透明度等处理。
brightness(100%) 是什么意思？
表示保持原始亮度，低于 100% 变暗，高于 100% 变亮。
blur() 和 opacity() 如何使用？
blur() 使用非负长度控制模糊，opacity() 使用 0～100% 控制透明度，100% 为完全不透明。
CSS filter 会修改原始图片吗？
不会。它只影响浏览器中的显示效果，不会写入或修改源图片文件。
为什么重置后输出 filter: none？
全部参数恢复无效果的默认值时，可以用 none 完整表达，无需逐个列出默认函数。