在线免费CSS滤镜生成器
可视化生成CSS滤镜效果：亮度、对比度、饱和度、色调和模糊。
'/%3E%3Ccircle cx='200' cy='150' r='70' fill='rgba(255,255,255,.25)'/%3E%3C/svg%3E)
Who uses the CSS滤镜生成器?
- 在应用到项目之前预览图片滤镜组合效果的前端开发者。
- 在 CSS 中为悬停状态设计视觉效果和色彩主题原型的 UI 设计师。
- 在编写最终 CSS 前探索亮度/对比度/饱和度滤镜相互作用方式的 Web 开发者。
How the CSS滤镜生成器 works
工具加载时会附带一张内置的示例渐变图片——没有上传选项。
调整滤镜滑块：亮度、对比度、饱和度（0–200%）、色相旋转（0–360°）、模糊（0–20px）、灰度、复古色调、反色（0–100%）。
组合多个滤镜以达到所需效果；点击 Reset 可将所有滑块恢复默认值。
从输出面板复制 CSS filter 属性，用于你的项目。
Tips & tricks
- 没有图片上传功能——请先在内置预览图上测试滤镜组合，再复制 CSS 应用到你的真实图片上。
- 保持默认值的滤镜（100% 亮度、0 模糊等）会自动从输出中省略，使生成的 CSS 保持精简。
- opacity() 和 drop-shadow() 这里没有作为滑块提供——如需要，请手动添加到复制的 filter 值中。
- 点击 Reset 可立即将每个滑块恢复默认值，重新开始。
Frequently Asked Questions
这个工具生成哪些 CSS 滤镜？
八种滤镜：brightness()、contrast()、saturate()、hue-rotate()、blur()、grayscale()、sepia() 和 invert()。它们会按此顺序组合成一个 filter 属性，保持默认值（无效果）的滤镜会被跳过。
我可以上传自己的图片来预览滤镜吗？
目前不可以——预览使用的是固定的内置渐变图片。请复制生成的滤镜 CSS，并在你的项目中将其应用到自己的图片上，以查看在真实内容上的效果。
如何在悬停时给图片应用 CSS 滤镜？
在 :hover 中添加滤镜：.image { filter: none; transition: filter 0.3s; } .image:hover { filter: brightness(1.2) contrast(1.1); } 这样可以在鼠标悬停时创建平滑的滤镜过渡。
box-shadow 和 drop-shadow 滤镜有什么区别？
box-shadow 应用于元素的盒子（矩形）。drop-shadow() 滤镜会跟随元素实际的 alpha 形状——非常适合带透明度的 PNG 图片，让阴影贴合图片轮廓。本工具没有包含 drop-shadow 控件；如有需要，请手动添加到复制的 CSS 中。
CSS 滤镜可以做动画吗？
可以。CSS 滤镜可以通过过渡和关键帧动画实现动画效果：@keyframes pulse { 0% { filter: brightness(1); } 50% { filter: brightness(1.5); } 100% { filter: brightness(1); } }
Is my data safe when using the CSS滤镜生成器?
Completely safe. The CSS滤镜生成器 processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the CSS滤镜生成器 output in commercial projects?
Yes. The CSS滤镜生成器 is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the CSS滤镜生成器 follow official standards?
Yes. The CSS滤镜生成器 is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.