渐变色个性签名生成器

✍ 功能简介

渐变色个性签名生成器是一个纯前端的在线工具，用来把一句普通的话变成有辨识度的视觉签名。它提供两种产出： 一种是渐变签名卡片——渐变背景配上渐变填充的文字，可导出为 PNG 图片； 另一种是彩色文字代码——把文案逐字染上渐变色，输出 HTML / BBCode / Unicode 样式文本，粘贴到支持富文本的地方即可生效。 两种模式共用同一套配色。工具不需要注册、不上传图片、不写数据库，打开页面就能用。

为什么需要它

在社交平台上，昵称和签名是唯一长期展示的名片。纯文字签名信息量有限，而一套克制又有质感的渐变色， 能在不喧宾夺主的前提下显著提升辨识度。设计师用它快速验证配色，运营用它产出统一的品牌水印， 普通用户用它做一张好看的朋友圈配图或邮件落款。相比打开设计软件从头画，这里只需要输入文字、点两下配色。

使用场景

• 社交平台配图：把一句签名、座右铭导出为方形或竖版卡片，直接发朋友圈、小红书、Instagram。
• 邮件与文档落款：导出透明背景 PNG，贴在邮件签名、PPT 封面或电子文档的页脚。
• 图片水印：给自己的摄影作品、插画加上专属的渐变署名，防止被无署名搬运。
• 游戏 / 论坛 / 社区昵称：用文字代码模式生成逐字渐变或 Unicode 加粗的文字，粘贴到支持的颜色标签里。
• 设计灵感：从 12 套预设或随机配色快速得到一组协调的渐变色，复制 CSS 直接用到网页里。

它是怎么算出来的

配色部分是标准的线性插值：先取起始色和末尾色，按两者在 RGB 通道上的差值等分生成 2-7 个色标， 再按位置在相邻色标之间继续插值，因此无论选几个颜色，过渡都是连续的。角度决定渐变矢量的两个端点， 径向模式则以画布中心为圆心向外扩散。

卡片绘制使用 Canvas 2D：先用同一组色标铺满背景（可加噪点质感），再把文字整块区域作为渐变范围， 让文字本身也呈现出连续的色彩变化。文字过长时会自动缩小字号，保证不溢出内边距。 文字代码模式则把文案拆成单个字符，按字符序号在色标序列上取色，做到「一个字一种颜色」的顺滑过渡。

参数说明

参数	作用
颜色数量	2-7 个色标，越多过渡越细腻，但差别在视觉上会迅速变小
渐变角度	0° 从左到右，90° 从上到下，可自由拖动
文字渐变填充	关闭后文字为纯白，只让背景承担色彩
噪点质感	叠加一层极淡的噪点，避免大面积纯渐变的塑料感
透明背景	只导出文字本身，适合叠加到照片或深色文档上
字符区间	如 1-3,5-8，仅对指定字符应用粗体 / 斜体 / 下划线

注意事项

1. 字体差异：卡片使用系统字体渲染，不同操作系统的字形会有细微差别；需要完全一致的排版时，请用同一台设备导出。
2. 富文本支持：HTML 与 BBCode 是否能显示颜色，取决于目标平台是否放行对应标签；多数社交 App 的昵称框不支持任何标签，此时可改用 Unicode 样式或卡片图。
3. 中文字形：Unicode 的数学字母只覆盖拉丁字母与数字，中文会保持原样，这是字符集的限制，并非工具故障。
4. 导出尺寸：4x 的 1080 方图会得到 4320 × 4320 的 PNG，文件较大；超过约 4000 万像素时工具会提示降档。

常见问题（FAQ）

Q：导出的图片会有水印吗？
A：不会。卡片上除了你自己输入的文案和落款，没有任何工具标识。

Q：我的配色能保存下来吗？
A：可以。点击「收藏当前配色」即可保存到浏览器本地，最多 12 组；历史颜色则记录最近用过的 12 组配色，两者都只存在你自己的浏览器里。

Q：文字代码能直接用在微信昵称上吗？
A：微信昵称不支持 HTML / BBCode 颜色标签，因此彩色代码在那里不会生效；但 Unicode 样式生成的粗体、斜体字形在多数平台可以正常显示，也可以改用卡片图。

Q：为什么同样的配色，导出的图和预览略有差异？
A：预览画布会被等比缩放到屏幕上，而导出是按原始像素重绘的，两者使用同一段绘制代码，细节上的观感差异来自缩放插值。