CSS 滤镜生成器

什么是 CSS filter 属性？

CSS filter 属性将模糊、亮度、对比度和颜色偏移等视觉效果应用于元素。它常用于图片、背景甚至整个 UI 区域，以创建类似 Instagram 的照片效果、高亮活动状态或使模态框后的背景内容变暗。在大多数浏览器中，滤镜是 GPU 加速的，即使在大元素上也能保持良好性能。

filter 属性接受一个或多个滤镜函数，按顺序应用。您可以将模糊与亮度、灰度与对比度或任何其他组合结合使用，以实现所需的视觉基调。

滤镜函数详解

CSS 提供多种滤镜函数，每个控制元素外观的不同方面。了解各函数的作用有助于有效组合：

默认值不会产生变化，因此只需添加要调整的函数。亮度设为 50% 会使元素变暗，150% 则变亮。

组合多个滤镜

filter 属性的真正威力在于组合多个函数时。常见的组合是 grayscale(100%) contrast(120%)，用于高对比度黑白效果。另一个流行组合是 sepia(80%) saturate(150%)，用于温暖的复古外观。您还可以使用 blur(2px) brightness(90%) 来微妙地变暗和柔化对话框后的背景。

滤镜按您编写的顺序应用，但由于每个函数独立地对像素数据操作，对于本工具中的函数，顺序通常不太重要。尝试不同组合，发现适合您设计的外观。

何时使用 CSS 滤镜

CSS 滤镜在许多设计场景中都很有用。常见用例包括：无需在外部工具中编辑即可对图片应用照片效果，使模态框或遮罩层后的背景变暗和模糊，创建在交互时变亮或增加饱和度的悬停效果，通过转换为灰度来模拟无障碍视图，以及使用色彩偏移背景构建创意英雄区域。

由于滤镜是 GPU 加速的，它们适用于性能至关重要的动画过渡和悬停状态。但是，在非常大的元素上应用重度模糊仍可能在低端设备上导致掉帧，因此请在目标硬件上测试。

如何生成 CSS 滤镜

本工具让您可视化设计滤镜效果：调整每个滑块以设置模糊、亮度、对比度、灰度、色相旋转和饱和度值。预览实时更新，让您看到组合效果，CSS 代码自动生成。点击"复制 CSS"获取代码并粘贴到样式表。

所有操作都在浏览器中本地运行 — 不会向任何服务器发送数据，您的设计选择完全私密。