分类

← View All Tools

图像渐变叠加

为图像添加可自定义颜色、方向和混合模式的渐变叠加效果

Click to upload file or drag and drop file here

Maximum file size: 10MB Supported formats: image/jpeg, image/png, image/webp, image/gif, image/bmp, image/tiff

应用渐变叠加的图片

要应用的渐变类型

渐变的起始颜色

渐变的结束颜色

线性渐变的方向（0-360度）

0 0.5 1

渐变叠加的不透明度（0.0到1.0）

如何将渐变与图像混合

结果图片的输出格式

有损格式的输出质量

关键信息

分类
Design
输入类型
file, select, color, number, range
输出类型
file
样本覆盖
4
支持 API
Yes

概览

图像渐变叠加工具可为您的图片快速添加一层可自定义的渐变色彩效果。您可以自由选择渐变类型、起止颜色、方向、不透明度及混合模式，轻松实现色调调整、氛围营造或创意视觉设计。

适用场景

  • •需要为照片或设计稿快速统一色调或添加艺术化滤镜时。
  • •希望为产品图、海报或社交媒体配图增加视觉层次感和氛围感时。
  • •需要批量处理多张图片，使其具有统一的渐变风格或品牌色覆盖时。

工作原理

  • •上传一张需要处理的图片文件（支持 JPEG、PNG、WebP 等常见格式）。
  • •设置渐变参数：选择渐变类型（线性、径向或菱形），定义起始和结束颜色，并调整方向与不透明度。
  • •选择混合模式（如叠加、柔光、正片叠底等）以控制渐变与原图的融合效果。
  • •指定输出格式（PNG、JPEG 等）和质量，点击处理并下载结果图片。

使用场景

为社交媒体头像或封面添加统一的品牌色渐变背景。
将普通的产品照片处理成具有特定氛围（如复古、梦幻、冷峻）的营销图片。
为系列插画或摄影作品集添加一致的色彩滤镜，强化视觉风格。

用户案例

1. 统一产品图色调

电商设计师
背景原因
设计师需要为一系列白色背景的产品主图添加统一的暖色调，以匹配秋季促销活动的页面风格。
解决问题
手动在每张图上绘制渐变并调整混合效果耗时且难以保证一致性。
如何使用
批量上传产品图，设置从浅橙色到透明的径向渐变，混合模式选择“柔光”，不透明度设为 0.3。
示例配置
{
  "gradientType": "radial",
  "startColor": "#FFD8A8",
  "endColor": "#FFFFFF",
  "opacity": 0.3,
  "blendMode": "soft-light"
}
效果
所有产品图中心区域自然泛起柔和的暖色调，边缘保持原样，整体视觉风格统一且富有季节感。

2. 创作双色调艺术照片

摄影爱好者
背景原因
用户想将一张城市夜景照片处理成流行的双色调（Duotone）艺术效果。
解决问题
需要将图像转换为仅由两种颜色（如深蓝和亮黄）构成的风格，但不知如何实现。
如何使用
上传夜景照片，选择线性渐变，设置起始颜色为深蓝色，结束颜色为亮黄色，方向调整为 90 度，混合模式尝试“颜色”或“叠加”。
示例配置
{
  "gradientType": "linear",
  "startColor": "#0A2463",
  "endColor": "#FFD166",
  "direction": 90,
  "blendMode": "color"
}
效果
照片被重新映射为由深蓝和亮黄构成的双色调图像，呈现出强烈的视觉冲击力和艺术感。

用 Samples 测试

image, png, jpg
Web Python 图像处理示例
Web Python 图像处理示例，使用 PIL/Pillow 包括读取、保存、缩放和格式转换
title token image
image
Web TypeScript 图像处理示例
Web TypeScript 图像处理示例，包括图像读取保存、缩放和格式转换
title token image
image
Windows C++ 图像处理示例
Windows C++ 图像处理示例，包括读取/保存图像、调整大小和使用Windows Imaging Component进行格式转换
title token image
image
Web Rust 图像处理示例
Web Rust 图像处理示例，包括图像读取保存、缩放和格式转换
title token image
image

相关专题

ImageConvert工具专题
探索 100 个围绕 image 的 convert 工作流工具，快速找到相近能力。
Image 工具专题
探索 40 个围绕 image 的 utility 工作流工具，快速找到相近能力。
JsonConvert工具专题
探索 100 个围绕 json 的 convert 工作流工具，快速找到相近能力。
AudioConvert工具专题
探索 100 个围绕 audio 的 convert 工作流工具，快速找到相近能力。

常见问题

支持哪些图片格式？

支持上传 JPEG、PNG、WebP、GIF、BMP 和 TIFF 格式的图片。

有哪些渐变类型可选？

提供线性渐变、径向渐变和菱形渐变三种类型。

如何控制渐变的明显程度？

通过调整“渐变不透明度”滑块（0.0 到 1.0）来控制，数值越低渐变效果越淡。

混合模式有什么作用？

混合模式决定了渐变颜色如何与原始图像像素相互作用，例如“叠加”能增强对比，“柔光”效果更柔和。

输出图片质量如何设置？

对于 JPEG、WebP 等有损格式，可以通过“质量”参数（1-100）来控制，数值越高画质越好，文件也越大。

API 文档

请求端点

POST /zh/api/tools/image-add-gradient

请求参数

参数名 类型 必填 描述
imageFile file (需要先上传) 是 应用渐变叠加的图片
gradientType select 否 要应用的渐变类型
startColor color 否 渐变的起始颜色
endColor color 否 渐变的结束颜色
direction number 否 线性渐变的方向（0-360度）
opacity range 否 渐变叠加的不透明度（0.0到1.0）
blendMode select 否 如何将渐变与图像混合
outputFormat select 否 结果图片的输出格式
quality number 否 有损格式的输出质量

文件类型参数需要先通过 POST /upload/image-add-gradient 上传获取 filePath，然后将 filePath 传递给对应的文件字段。

响应格式

{
  "filePath": "/public/processing/randomid.ext",
  "fileName": "output.ext",
  "contentType": "application/octet-stream",
  "size": 1024,
  "metadata": {
    "key": "value"
  },
  "error": "Error message (optional)",
  "message": "Notification message (optional)"
}
文件: 文件

AI MCP 文档

将此工具添加到您的 MCP 服务器配置中： 

{
  "mcpServers": {
    "elysiatools-image-add-gradient": {
      "name": "image-add-gradient",
      "description": "为图像添加可自定义颜色、方向和混合模式的渐变叠加效果",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=image-add-gradient",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

你可以串联多个工具，比如：`https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`，最多20个。

支持 URL 文件链接或 Base64 编码作为文件参数。

如果遇见问题，请联系我们：[email protected]