拖滑块调 blur / brightness / contrast / grayscale / sepia / hue-rotate / saturate / invert / opacity + drop-shadow,实时预览,一键复制 filter 字符串
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
![滤镜效果预览图](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200"><defs><linearGradient id="sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="%23ff9a3c"/><stop offset="0.5" stop-color="%23ff5e7e"/><stop offset="1" stop-color="%237b2ff7"/></linearGradient></defs><rect width="320" height="200" fill="url(%23sky)"/><circle cx="240" cy="55" r="34" fill="%23fff3b0"/><polygon points="0,200 90,110 150,160 220,90 320,170 320,200" fill="%2316324f"/><polygon points="0,200 120,140 200,175 320,130 320,200" fill="%230b1d33"/></svg>)
filter: none;
这个工具能做什么
可视化构建 CSS `filter` 属性。拖动滑块调模糊、亮度、对比度、灰度、 褐色、色相旋转、饱和度、反相、不透明度,再按需追加一条 `drop-shadow(x y 模糊 颜色)`。预览区会把你将要复制的那串完全相同的 filter 应用到示例照片、渐变卡片或渐变文字上,所见即所得。滤镜按 标准的从左到右顺序拼接,默认值自动省略,所以你绝不会复制到 `brightness(100%) contrast(100%)` 这种废操作,拿到的是干净的一行, 例如 `filter: blur(2px) saturate(150%) drop-shadow(0 6px 18px #0a0e1a);`。 可以只复制值,也可以复制完整 `.box { ... }` 代码块。内置 10 个预设 涵盖常见风格——复古、黑白电影、冷色、暖色、磨砂、高饱和、褪色、 反相、投影抬升——作为起点再微调。每个滑块都会同步到 URL,"分享 链接"能在同事那里还原你的同一套滤镜,预览目标的选择则记在本地。 100% 浏览器本地:不上传,任何图片都不离开你的页面。
工具细节
- 输入
- 文件 + 数值 + 结构化内容
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 10 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
CSS 滤镜生成器 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
给画廊组件做一套 Instagram 风格的照片滤镜
你在排 `<figure>` 网格,想让每张缩略图都套一致的"暖复古"处理。 从复古预设起步(sepia 45%、saturate 130%、contrast 95%、 brightness 105%),然后在预览里把 sepia 往下调到 30%,直到看起来 "有滤镜"但不发黄。复制 `.box { filter: ... }` 代码块,把类名改成 `.thumb` 放进你的 CSS。因为预览用的是真实渐变照片,你能在上线前 就发现过饱和,而不是等 QA 拿真图时才发现。
用 grayscale + opacity 做禁用 / 加载态
数据加载时卡片需要一个明确的"未激活"外观。把灰度设成 100%、 不透明度设成 60%,其余保持默认。输出就是 `filter: grayscale(100%) opacity(60%);`——一条声明,用 `.is-loading` 类一开一关。渐变卡片上的实时预览能精确显示它有多 "洗白",让你把不透明度调到既明显是禁用、内容又还看得清的临界点。
不改源文件就给单色 SVG 图标集换色
你有一套黑色 SVG 图标,要让它们匹配品牌青色,但又不能改源文件。 组合 invert、saturate 和 hue-rotate:invert(100%) 把黑翻成白,再用 saturate 和 hue-rotate 推向青色,对着渐变文字预览校。这是个取巧 手段——要精确品牌色还是改源图更好——但快速套个主题色,复制粘贴 就行,URL 分享链接还能让同事核对你定下的确切角度。
给抠图 logo 加贴合形状的柔和投影
首屏上一个透明 PNG 的 logo 需要立体感,但 `box-shadow` 会在整个 图片盒后面画一个矩形。启用 drop-shadow,设 X 0 / Y 8 / 模糊 18, 选一个深品牌色,预览里就能看到投影贴着 logo 的剪影。复制 `filter: drop-shadow(0 8px 18px #0a0e1a);`,投影跟着真实的 alpha 形状走——这正是 box-shadow 做不到的。
在接 backdrop-filter 之前先调出磨砂叠层的感觉
在正式做整块玻璃面板之前,你想看看多少模糊 + 亮度在你的渐变上 才读得出"磨砂"。在卡片目标上用磨砂预设(blur 4px、brightness 110%、saturate 120%)判断量,再把同样的数字搬到真面板的 `backdrop-filter` 上。本工具给你快速的视觉判断;玻璃拟态生成器 (见下方链接)会带正确的降级方案搭出完整的背景模糊面板。
常见踩坑
把 drop-shadow 放在视觉滤镜前面。滤镜顺序是有意义的:写成 `drop-shadow(...) blur(8px)` 时,blur 会作用在已经加了投影的结果上,把投影也糊掉。把视觉调整放前面、投影放最后——本工具始终把 drop-shadow 排在末尾,让投影是从最终成像投出去的。
想只模糊背景却用了 filter: blur()。`filter: blur()` 会把元素连同它的子元素(包括文字)一起模糊。如果你只想模糊面板背后的东西(磨砂玻璃),要用的是 `backdrop-filter: blur()`。本工具生成的是 `filter`;玻璃拟态效果见下方的玻璃拟态生成器链接。
以为 100% 永远代表不变。对亮度、对比度、饱和度来说,100% 是中性基线;但对灰度、褐色、反相来说,100% 是最大效果,0% 才是不变。搞混了——比如把灰度设成 100 还指望是轻微效果——结果会得到完全去色的图。复制前先看清滑块标签和单位。
隐私说明
全部在你的浏览器标签里运行。示例图是内嵌在页面里的 SVG,不上传任何 照片,这里也无法加载你自己的文件,所以没什么可泄露的。滑块数值会被 编码进 URL 的查询串(`?f=` 参数),让分享链接能还原你的同一套滤镜; 也就是说你把链接贴给谁、链接经过的服务器日志里,都会看到这些数字 设置——但那只是几个 CSS 数字,绝不包含图片或任何个人数据。预览目标 的选择存在本浏览器的 localStorage 里,不发往任何地方。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。