CSS 滤镜生成器，免费

使用方法

1. 调整滤镜滑块：使用滑块控制模糊、亮度、对比度、饱和度、色相旋转、不透明度、灰度、棕褐和反色。
2. 实时预览：拖动滑块时，示例图片或元素会即时更新。
3. 复制 CSS：完整的 filter 属性值（例如 filter: brightness(1.2) contrast(1.5) saturate(0.8)）可直接粘贴到您的样式表。

为什么使用 CSS 滤镜生成器？

CSS 滤镜让您在浏览器中直接应用图像处理效果 ， 模糊、对比度、亮度、色彩偏移 ， 无需 Photoshop 或图像编辑软件。它们可作用于图片、视频和任何 HTML 元素。手写 filter 属性链需要记住精确的函数名和有效范围。这款生成器提供直观的滑块与即时视觉反馈，让您获得想要的效果。

功能特性

• 所有 CSS filter 函数：blur、brightness、contrast、saturate、hue-rotate、opacity、grayscale、sepia、invert 和 drop-shadow。
• 实时预览：在示例图片或您自己的图片上实时看到变化。
• 数值校验：滑块会强制每个 filter 函数的有效范围。
• 单独重置：将某个滤镜恢复默认值，而不影响其他。
• 合并输出：所选的所有滤镜合并为单条 filter 字符串。

常见问题

CSS 滤镜可以用于视频吗？

可以。CSS filter 属性适用于任何元素，包括 <video>、<img>、<div> 和 <canvas>。应用于视频时，滤镜会在播放时实时渲染。

filter 和 backdrop-filter 有什么区别？

filter 将效果应用于元素本身及其所有子元素。backdrop-filter 将效果应用于元素后面（下面）的内容 ， 常用于毛玻璃效果。

CSS 滤镜会影响性能吗？

带模糊或复杂合成的滤镜对 GPU 较为吃重。对于带动画的滤镜，请确保元素位于自己的合成层（可添加 transform: translateZ(0) 作为提示）。图标和图片上的静态滤镜影响很小。

CSS filter 的真正作用

CSS filter 属性在浏览器将元素绘制到屏幕之前，将图形效果（模糊、对比度调整、颜色偏移、投影）应用于该元素及其子元素。处理完全在浏览器的渲染管线中进行，通常由 GPU 加速，无需 JavaScript 参与。效果是仅视觉的：底层 HTML、图像引用的文件以及布局都保持不变。使用 filter: grayscale(1) 显示的照片在文件中仍保留其原始颜色；浏览器仅在显示时转换为灰度。

CSS filter 提供十个函数：blur(px) 高斯模糊、brightness(n) 和 contrast(n) 色调调整、saturate(n) 颜色强度、hue-rotate(deg) 偏移色轮、opacity(n) 透明度、grayscale(n) 和 sepia(n) 去饱和效果、invert(n) 负片输出，以及 drop-shadow(...) 形状感知阴影（与 box-shadow 不同，drop-shadow 跟随实际渲染的形状包括透明部分，非常适合在图标或带切割边的 PNG 图像上添加阴影）。函数链式组合：filter: brightness(1.2) contrast(1.3) saturate(0.9) 按顺序应用所有三个。

这对现代 Web 设计的重要性：十年前，为了设计一致性调整图像亮度、色调或饱和度需要在 Photoshop 中预处理每张图片并重新导出。CSS filter 将相同的调整带到运行时，以非破坏性方式应用。你可以提供一张图片并根据主题、悬停状态或用户偏好以不同方式呈现。你还可以使用滤镜进行无障碍处理：反相灰度照片作为占位符，或暗化图像叠加层以实现高对比度文本可读性。权衡是某些滤镜（特别是模糊）的性能以及滤镜也影响子元素的事实，这可能会出乎意料地级联。

本工具的幕后运作

工具中的每个滑块都绑定到单一滤镜函数。当你移动滑块时，JavaScript 读取该值，使用该值构造滤镜函数字符串（例如 brightness(1.4)），并将所有活动函数连接成单个 filter CSS 字符串。该字符串作为内联样式应用于预览图像，当浏览器以新滤镜重新绘制时产生即时视觉反馈。JavaScript 中不处理任何图像数据：实际的像素级数学发生在浏览器渲染引擎内部，通常在 GPU 上。

代码框中显示的生成 CSS 是应用于预览的相同字符串。点击「复制 CSS」，工具使用现代 navigator.clipboard.writeText() API 将该字符串写入剪贴板。该字符串已准备好粘贴到任何元素的 style 属性或样式表中的任何类声明中。该工具还支持加载你自己的图像：选择一个文件，它会在浏览器中成为临时 blob: URL，从不上传到任何地方，滤镜会在你的实际图像上预览，以便你可以为你的内容调出确切的外观。

重置行为是按滤镜的：每个滑块都有自己的重置按钮，只将该滤镜返回到其无效果值（乘数为 1，hue-rotate 为 0deg，blur 为 0px）。「全部重置」按钮同时将每个滑块返回到中性。该工具的状态仅存在于内存中；刷新页面，你的滤镜组合就会消失。没有服务器存储你选择的滤镜值，没有分析跟踪你尝试的组合。该工具是一个无状态、广告支持的 CSS 试验场。

CSS 滤镜简史

• SVG 滤镜基元，2001 年。SVG 1.0（W3C 推荐标准，2001 年 9 月）定义了一个全面的滤镜系统：feGaussianBlur、feColorMatrix、feConvolveMatrix 和数十个其他。SVG 滤镜模型功能强大但冗长，将 SVG 滤镜应用于 HTML 元素需要 filter: url(#id) 引用内联 SVG，从未在 HTML 优先工作流中被广泛采用。
• CSS Filter Effects Module Level 1, 2014 年。W3C 发布 Filter Effects Module Level 1（2014 年 12 月），引入了简化的简写滤镜函数（blur、brightness、contrast 等），不需要内联 SVG。这些在 95% 的情况下匹配最常见的图像处理需求，并且比 SVG 滤镜易于创建得多。
• 浏览器支持达到临界质量，2015 年。Chrome 53（2015）和 Firefox 35（2015）发布无前缀的 filter 支持；Safari 自版本 6（2012）以来一直具有前缀支持。到 2015 年，CSS filter 在生产网站上广泛可用。设计师开始大规模使用滤镜进行悬停效果、图像规范化和装饰处理。
• backdrop-filter 发布，2017 至 2024 年。Safari 9（2015）为毛玻璃效果引入 -webkit-backdrop-filter。Chromium 在 Chrome 76（2019 年 7 月）发布无前缀的 backdrop-filter。Firefox 一直坚持到版本 103（2022 年 7 月）。iOS 风格的「毛玻璃导航栏」成为默认的现代 UI 模式。
• 深色模式推动滤镜采用，2019 年。深色模式设计趋势（Apple 的 macOS Mojave 2018、Android 10 2019、iOS 13 2019、浏览器 prefers-color-scheme 2019）加速了滤镜在 invert-and-hue-rotate「自动深色模式」CSS 中的使用，其中单个 filter: invert(1) hue-rotate(180deg) 规则将浅色模式网站变成可通过的深色模式视图，无需重新设计。
• SVG 滤镜复杂性通过 CSS 回归，2024 年起。CSS Filter Effects Module Level 2（草案）提出新函数和不使用内联 SVG 组合自定义滤镜管线的能力，弥合方便的简写函数与 SVG 滤镜基元的全部功能之间的差距。浏览器支持在 2025 年仍在逐步推出。

真实世界的工作流

• 品牌一致的图像规范化。从许多摄影师或库存提供商获取图像的网站会得到不一致的饱和度、对比度和亮度。对所有图像应用统一的 CSS 滤镜（filter: saturate(0.85) contrast(1.05) brightness(0.95)）将它们全部带到相同的调色板中，而无需预处理每个文件。当你希望某张图片突出时，为该特定图像反转滤镜。
• 悬停和交互状态。使用滤镜过渡的悬停效果感觉精致且轻量。具有 filter: grayscale(0.5) 静止状态和 filter: grayscale(0) 悬停状态的卡片图像创建微妙的交互邀请。具有 filter: brightness(0.9) 静止状态和 brightness(1.1) 悬停状态的图像缩略图做同样的事情，无需两个图像文件。
• 带 backdrop-filter 的毛玻璃 UI。使用 backdrop-filter: blur(20px) 在半透明背景上的模态叠加层、粘性导航栏和工具提示弹出框产生 iOS 风格的毛玻璃效果。这在现代营销网站上现在是预期的；filter 不适用，因为我们想模糊叠加层后面的内容，而不是叠加层本身。
• 动态主题和深色模式。便宜的深色模式：将你的网站包装在带有通过媒体查询或切换激活的 filter: invert(1) hue-rotate(180deg) 容器中。这将深色文本转换为浅色，浅色背景转换为深色，同时保留大多数颜色。这是处理 80% 深色模式要求的快速胜利，无需设计两个主题。真实图像应该用嵌套的 filter: invert(1) hue-rotate(180deg) 排除以撤销反转，否则照片看起来怪异。
• 无障碍工具和高对比度模式。视觉障碍用户可以应用浏览器级滤镜（Chrome 的高对比度扩展、操作系统级反转），但设计师也可以提供网站级滤镜切换：一个按钮，将 filter: contrast(2) 应用于整个页面以供低视力用户使用。WebAIM 和 WCAG 不要求这一点，但这是一些网站添加的低成本无障碍礼貌。
• 艺术照片处理。棕褐色调、复古外观、蓝图照片效果和其他艺术处理结合滤镜函数：filter: sepia(1) hue-rotate(200deg) saturate(1.5) brightness(0.8) 在一个声明中产生冷色调复古外观。与图像编辑器预设相比，CSS filter 是非破坏性的，可实时调整而无需重新导出。

常见陷阱及其含义

• 模糊是昂贵的滤镜。在滤镜函数中，blur() 是最耗 GPU 的，特别是在大半径（超过 20px）的大元素上。同时动画化模糊或将其应用于许多元素可能会明显降低帧率。对于粘性毛玻璃导航栏，模糊覆盖小区域并运行良好；对于全屏模态模糊，预计在低端设备上会有短暂卡顿。其他滤镜（contrast、brightness、saturate）在现代 GPU 上接近免费。
• 滤镜影响所有后代。将 filter 应用于容器会影响其中的每个子元素。如果你用 filter: grayscale(1) 容器包装卡片，里面的文字也会变成灰度（这通常不会改变任何东西，因为文字已经是单色），任何彩色子元素（图标、徽章）都会失去颜色。要只过滤特定子元素，请单独在它们上应用滤镜，而不是在父元素上。
• 低对比度损害可读性。对包含文本的卡片减少对比度（filter: contrast(0.5)）使文本更难阅读，通常使其低于普通文本的 WCAG AA 4.5:1 对比度。谨慎应用减少对比度的滤镜；检查任何顶部文本是否仍然可读。对于仅装饰元素（背景图像、分隔符），减少对比度是可以的。
• 滤镜不会改变点击区域。与 clip-path 不同，CSS filter 不会改变元素的可点击区域。具有 filter: blur(5px) 的按钮看起来柔和且失焦，但其原始矩形仍然完全可点击。这通常是期望的，但当「幽灵」或「禁用外观」的元素仍然在点击时触发时可能会令人惊讶。将 filter 与 pointer-events: none 结合以实际禁用交互。
• Safari 需要 backdrop-filter 的 -webkit- 前缀。基本的 filter 属性在所有现代浏览器中都没有前缀。但 backdrop-filter 在 Safari（包括较新版本）中仍然需要 -webkit-backdrop-filter 前缀。对于跨浏览器毛玻璃效果，同时声明 -webkit-backdrop-filter 和 backdrop-filter 具有相同的值。自动前缀器处理这一点；如果你手写 CSS，请记住前缀。
• 动画化滤镜链会跳动。当滤镜链保持相同时（例如从 blur(0px) 过渡到 blur(10px)），filter 上的 CSS 过渡会平滑插值。但在过渡中间添加或删除函数（例如从 blur(0px) 过渡到 blur(10px) brightness(1.2)）会突然跳变。对于平滑的多滤镜过渡，在开始和结束状态都声明所有滤镜，并使用适当的基线值（brightness(1) 是默认值）。

隐私：一切都在你的浏览器中发生

CSS 生成器工具有两种风格：运行客户端 JavaScript 的简单 HTML 页面（私密、快速）和保存项目的云编辑器（协作但存在隐私权衡）。这个工具是第一种。你的滑块值、生成的 CSS，甚至你上传以进行预览的任何图像都完全保留在你的浏览器会话中。刷新页面，状态就会消失，除非你先复制 CSS 或保存截图。

「上传你自己的图像」功能值得隐私说明：当你选择文件时，浏览器会创建一个指向内存的本地 blob: URL，预览会显示你的图像并应用滤镜。不会向任何服务器发出请求。在上传期间打开浏览器的网络选项卡；你会看到零出站流量。图像只存在于你浏览器标签的内存中，当你关闭标签时被擦除。对于机密图像（专有设计、医疗扫描、NDA 保护的截图），这是重要的隐私属性。

什么时候另一个工具是正确选择

• 用于永久编辑的 Photoshop 或 Lightroom。CSS filter 仅在显示时：底层图像文件不变。如果你希望实际图像文件已经包含这些调整（更小的文件大小、更快的页面加载、在较旧浏览器中没有未过滤后备的风险），请在 Photoshop、Lightroom、GIMP 或 Affinity Photo 中编辑图像。CSS filter 用于动态显示；图像编辑器用于永久处理。
• 用于一次性批处理的 Image Filters。我们的 Image Filters 工具应用类似的滤镜效果，但产生带有内置滤镜的可下载 PNG/JPG。对于一致地处理许多图像（用于作品集、社交媒体集或资产库），该工作流比在运行时应用 CSS 滤镜更快。两个工具服务不同的用例。
• 用于复杂效果的 SVG 滤镜。CSS filter 简写涵盖了大多数需求，但不是全部。波纹失真、自定义卷积核（边缘检测、浮雕）、feTurbulence 噪声图案、位移图：所有这些都需要通过内联 SVG 加 filter: url(#myFilter) 的 SVG 滤镜基元。创建 SVG 滤镜更难，但解锁了简写 CSS filter 无法产生的效果。
• 用于主题的 CSS 自定义属性。使用 filter 的「反转深色模式」技巧有局限性：照片看起来错误、颜色偏移、性能可能受到影响。对于生产质量的深色模式，CSS 自定义属性（--bg-color、--text-color）和两个不同的主题集更干净。基于滤镜的深色模式是快速胜利，不是精致的解决方案。

更多常见问题

我可以平滑地动画化 CSS 滤镜变化吗？

可以，但有警告。filter 属性在 CSS 中可动画化，并且具有相同顺序中相同函数的两个滤镜链之间的过渡会平滑插值（blur(0px) brightness(1) 到 blur(10px) brightness(1.5) 有效）。在过渡中间添加或删除函数会突然跳变。对于平滑的多滤镜动画，在开始和结束状态都列出每个你想要过渡的函数，在你不希望应用特定滤镜的地方使用中性值（brightness(1)、saturate(1)、blur(0px)）。

CSS filter 在背景图像上工作吗？

是的。CSS filter 应用于整个元素，包括其背景图像、内容和子元素。如果你只想过滤背景图像而不是前景内容，典型方法是为背景使用单独的子元素（例如定位的 ::before 伪元素），并在其上应用滤镜，然后将内容作为未过滤的兄弟放在顶部。当你想过滤透明元素后面可见的内容时，backdrop-filter 属性也很有用。

CSS 滤镜被搜索引擎索引吗？

CSS 滤镜纯粹是视觉的，不会改变 HTML 内容。搜索引擎索引底层内容（图像 alt 文本、周围文本），就好像滤镜未被应用一样。具有 filter: grayscale(1) 的灰度图像仍然根据其文件和 alt 文本被索引为原始彩色图像。这通常是你想要的：滤镜对 SEO 或屏幕阅读器没有副作用。

为什么 drop-shadow 看起来与 box-shadow 不同？

Box-shadow 在元素的矩形框周围绘制阴影，忽略任何透明度。Drop-shadow（filter）绘制跟随实际渲染形状的阴影，包括透明区域。对于带切割边的 SVG 图标或带透明度的 PNG，drop-shadow 产生与可见轮廓匹配的形状感知阴影。同一元素上的 Box-shadow 会在边界框周围显示矩形阴影，看起来不对。对形状感知阴影使用 drop-shadow，对矩形元素使用 box-shadow。

opacity 和 filter: opacity() 的区别是什么？

在大多数浏览器中，它们产生视觉上相同的结果。技术差异：opacity 是顶级属性，而 filter: opacity() 是滤镜链的一部分，与其他滤镜组合。如果你有 filter: blur(5px) opacity(0.5)，两者都作为单个 GPU 操作一起应用。在滤镜链外使用 opacity 在大多数情况下工作相同。对于独立透明度坚持使用 opacity；仅在与其他滤镜链接时使用 filter: opacity()。

我可以快速重置所有滤镜吗？

是的。设置 filter: none 以在一个声明中删除所有滤镜。这是重置的最干净方法，特别是对于你想要在悬停退出时删除所有滤镜效果的悬停状态。或者，将每个滤镜函数设置为其中性值：filter: brightness(1) contrast(1) saturate(1) blur(0px) hue-rotate(0deg) grayscale(0) sepia(0) invert(0) opacity(1) 在功能上等同于 filter: none，但更冗长。