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 一样使用——做原型时很方便。
相关工具
图像模糊
在浏览器中对任意图像应用高斯、方框或运动模糊。半径 0-64 px 可调,提供等效 CSS filter 字符串可复制。
图片 0 0
CSS Flexbox 演练场
可视化选择 flex-direction、justify-content、align-items 与 gap——复制 CSS 或 Tailwind 类。
开发 0 0
CSS Grid 演练场
可视化选择 grid-template-columns / rows、gap 与项目对齐——CSS 直接复制到项目。
开发 0 0
图像双色调效果
为任何图像应用双色调效果 — 选阴影色和高光色，调整中点和对比度，下载结果。Spotify 风格封面两次点击搞定。
图片 0 0
CSS clip-path 构建器 (圆、椭圆、多边形、Inset)
CSS `clip-path` 属性可视构建器 — 选择形状 (圆、椭圆、inset、多边形)、用滑块调整数值或点击预览添加多边形顶点、复制即用 CSS 声明。内置 10 种形状预设 (三角形、六边形、星形、箭头、对话气泡、十字等)。
颜色 0 0
CSS 渐变生成器
用多色停靠点设计线性或径向 CSS 渐变并复制代码。
颜色 0 0