CSS 滤镜（filter）生成器

什么是 CSS 滤镜生成器？

实时对图片应用 CSS filter 属性。可组合模糊、亮度、对比度、灰度、色相旋转、反相、不透明度、饱和度、褐色和 drop-shadow，将结果与原图对比，并复制代码。你可以使用内置的示例图片，也可以加载自己的图片，图片只保留在你的设备上。

如何使用 CSS 滤镜生成器

1. 选择预设（黑白、复古、暖色、冷色、戏剧化……），或从“无”开始。
2. 拖动各个滤镜函数的滑块。
3. 如有需要，启用 drop-shadow() 并设置其偏移、模糊、颜色和不透明度。
4. 点击“使用自己的图片”，用本地文件进行测试。
5. 复制 CSS 代码。

示例

blur 2px, brightness 120%, hue-rotate -90°, sepia 50%, drop-shadow on (4px 4px 6px, black at 0.5)

filter: blur(2px) brightness(120%) hue-rotate(-90deg) sepia(50%) drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));

何时使用 CSS 滤镜生成器

适合图片悬停效果、统一的照片风格、压暗背景，以及沿透明 PNG/SVG 形状走的阴影（drop-shadow）。它不会修改图片文件本身；要永久修改，请使用图片编辑器或本站的图片工具。若要影响元素后方的内容而不是元素本身，请使用 backdrop-filter（参见玻璃拟态生成器）。

CSS 滤镜生成器 的工作原理

只会写入与中性值不同的函数（例如亮度为 100% 时会省略），并按固定顺序：blur、brightness、contrast、grayscale、hue-rotate、invert、opacity、saturate、sepia、drop-shadow。在 CSS 中顺序很重要，因为每个函数都作用于上一个函数的输出。如果没有任何改动，输出为 filter: none;。你的图片通过本地对象 URL 显示，从不上传。

常见用例

• ✓ 徽标的灰度到彩色悬停效果
• ✓ 图库中的复古或暖色照片风格
• ✓ 压暗文字下方的首屏图片
• ✓ 用 drop-shadow() 为透明 PNG 图标添加阴影
• ✓ 用 hue-rotate 快速得到类似色盲的预览

常见问题

探索更多分类