CSS 滤镜生成器

功能

• 九项滤镜：模糊、亮度、对比度、饱和度、色相旋转、灰度、棕褐、反相、不透明度
• 切换前景 filter 与背景 backdrop-filter 两种用途
• 背景模式自动加彩色演示底，模糊与饱和度一眼可见
• 五种预设：毛玻璃、黑白、老照片、高对比、霓虹
• 中性项整项不写，不会产出 blur(0px) 这类无效声明
• backdrop-filter 同时给出 -webkit- 前缀那一行
• 交付的 CSS 里带着两条陷阱的说明注释（跟随界面语言）
• 改任何一项都实时重画预览，不需要点生成
• 所有计算在浏览器本地完成，不上传任何东西

使用方法

1. 先选用途：前景 filter 还是背景 backdrop-filter
2. 从预设挑一个起手，或把预设设为自定义后自己拖滑杆
3. 观察预览，调到合适为止
4. 复制下方的 CSS，前缀与说明注释都跟着一起走

常见问题

filter 与 backdrop-filter 到底差在哪？

`filter` 作用在元素自己身上：模糊会连它的文字、边框一起糊掉。`backdrop-filter` 作用在元素背后：它把元素下面的东西做处理，元素本身保持清晰 —— 毛玻璃效果就是它加上一层半透明底色。所以想在卡片上糊出「背后的壁纸」用 backdrop-filter，想整块变灰或变亮用 filter。

为什么我设了 backdrop-filter 却没有任何效果？

最常见的原因是父元素上有 `filter` 或 `transform`。这两样都会给父元素建立包含块或合成层，`backdrop-filter` 所依赖的「背后」就不再是它以为的那块区域，于是整条失效。排查时沿祖先链一层层看过去。次要原因是漏了 `-webkit-` 前缀（Safari 上），以及背后本来就只有纯色 —— 一片纯色模糊完还是那片纯色，看起来像没生效。本工具的背景模式会给预览垫一块彩色底，就是为了让效果真的看得见。

为什么模糊是 0 时代码里没有 blur()？

因为 `blur(0px)` 是恒等变换，什么都不做。它会让代码变长、让人以后不敢删，而且在部分浏览器上任何 `filter` 值都会创建一层合成（把区域抬成 GPU 层）。所以本工具逐项判断：中性值整项不写。所有滑杆都在中性位时，输出是 `filter: none` 而不是空串 —— 空串是一条非法声明，会被外壳的校验整条丢弃。

一个元素能同时用 filter 和 backdrop-filter 吗？

能，它们是两条独立的声明，可以同时写：`filter` 处理元素自己的像素，`backdrop-filter` 处理它背后的。但要注意顺序与性能 —— 两者都可能触发合成层，在长列表或动画里叠加使用要留意帧率。本工具一次生成一种用途，需要两种时分别生成再合起来即可。