CSS 滤镜演练场
颜色
用滑块调整 9 种 CSS 滤镜函数，预览实时刷新（拖入你的图片或使用内置渐变块）。6 个预设（Cool、Warm、B&W、Sepia、Vintage、Inverted）助你迅速上手。输出包含即贴即用的 CSS `filter` 规则与 Tailwind 任意值类。
—
预览
AZ Tools
CSS
filter: none;
Tailwind
filter-none
使用方法
- 调节滑块或点击预设开始。
- 可选拖入图片在真实内容上预览。
- 复制 CSS 规则或 Tailwind 类。
常见问题
- Blur 小值看不太出来？
- CSS blur 使用高斯半径——约 10px 以上才明显。滑块上限 20px；UI 中很少需要更大的模糊。
- 「invert」对颜色的影响？
- 把每个通道替换为 255 − 值。可用于暗色模式技巧，但会反转包括照片在内的整张图，通常仅对图标或文字使用。
- 未改动的滑块为何不出现在输出？
- CSS filter 规则只包含你实际改动的函数（例如 brightness(100%) 默认值会省略）。
- Tailwind 任意值类是什么？
- Tailwind 自带快捷类（blur-md、contrast-125）但并不覆盖所有取值。任意值 `filter-[…]` 让任何滤镜都能像 utility 一样使用——做原型时很方便。