CSS backdrop-filter 生成器

通过拖动九个滤镜函数的滑块来实时构建 backdrop-filter CSS：blur、brightness、contrast、grayscale、hue-rotate、invert、opacity、saturate 和 sepia。输出会同时生成 backdrop-filter 和 -webkit-backdrop-filter，使效果能在现代浏览器中通用，并在可自定义的背景上渲染一个玻璃卡片，方便你在调整时查看结果。

1. 可选：点击一个预设（Frosted Glass、Dark Glass、Vintage、Inverted）以从精挑细选的外观开始。 2. 拖动 Controls 面板中的滑块；每个滤镜只有在与其默认值不同时才会出现在生成的 CSS 中（例如 brightness/contrast/saturate/opacity 默认为 100，blur 默认为 0）。 3. 在 Background 字段中编辑任何有效的 CSS background 值（渐变、图片 url、颜色），以便在不同背景下测试滤镜。 4. 点击 Copy 以复制 backdrop-filter 和 -webkit-backdrop-filter 两个声明。

blur 0–50px；brightness 0–200%（默认 100）；contrast 0–200%（默认 100）；grayscale 0–100%；hue-rotate 0–360deg；invert 0–100%；opacity 0–100%（默认 100）；saturate 0–200%（默认 100）；sepia 0–100%。Reset 会将所有滑块恢复为默认值。处于中性值的滤镜会从输出中省略；如果全部为中性值，输出为 backdrop-filter: none。