🎛
CSS 滤镜生成
可视化调节模糊、亮度、对比度、饱和度、灰度等 CSS filter,实时预览并生成代码。
本地处理 · 不上传
加载工具中…
相关：CSS滤镜 · filter · 模糊亮度 · 图片滤镜 · 饱和度
CSS 滤镜生成可视化调整模糊、亮度、对比度、饱和度、色相等滤镜参数，实时预览并输出 CSS。多个滤镜可以叠加，书写顺序会影响最终结果。
使用步骤
- 调整各项滤镜参数
- 实时预览效果
- 组合多个滤镜
- 复制生成的 CSS
使用场景
- 为图片添加视觉效果
- 制作悬浮状态的变化
- 实现主题的整体色调调整
- 调试现有的滤镜效果
小贴士
- 滤镜可以叠加，写在一个 filter 属性中依次应用，顺序会影响最终结果。
- 滤镜对元素及其所有子元素生效，包括文字。要只模糊背景应使用 backdrop-filter。
- 模糊与阴影类滤镜的渲染开销较大，大面积或配合动画使用时移动端可能掉帧。
常见问题
filter 和 backdrop-filter 有什么区别？
filter 作用于元素自身及其内容（文字也会被模糊），backdrop-filter 只处理元素背后透出的画面而内容保持清晰。毛玻璃效果必须用后者。
滤镜顺序有影响吗？
有。滤镜按书写顺序依次应用，先模糊后调对比度与先调对比度后模糊，结果并不相同。调不出预期效果时可以试着调换顺序。
性能怎么样？
简单的亮度、饱和度调整开销很小；模糊与投影需要逐像素计算，大面积使用或配合动画时可能明显掉帧，移动端尤其要实测。
CSS 滤镜生成是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用CSS 滤镜生成，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。