在线渐变背景生成器

实时预览CSS渐变效果，支持线性径向圆锥渐变，一键生成代码和导出图片

BUG反馈

【浏览器执行模式】 ：您的所有数据均在浏览器中处理，不会上传服务器，数据安全有保障。不放心的，可等待页面加载完成后 断网使用！（需提前登录账号）

【速度及稳定性】 ：处理速度由您的机器配置决定。由于浏览器差异，少数工具可能出现无法使用或异常：请使用：软件版工具

工具加载中，请稍等...

如无法加载或使用，请下载本地工具：https://tools.yikeaigc.com/

工具使用

返回旧版工具

先设置渐变，再复制代码或导出图片。 支持线性、径向、圆锥、重复渐变和多色节点，参数变化会同步到右侧预览。

设置渐变

先选择渐变类型，再调整方向和颜色节点。颜色节点建议保持从小到大排列。

渐变类型圆锥渐变适合角度色盘和环形背景

方向与形状线性渐变可使用角度或快捷方向

线性角度 90°

重复周期 32%

径向形状

扩散范围

重复周期 32%

中心 X 50%

中心 Y 50%

起始角度 0°

中心 X 50%

中心 Y 50%

重复渐变柔光层暗角细纹

颜色节点支持 2-10 个节点，可设置透明度和位置

示例模板可作为配色起点继续调整

代码导出

确认预览效果后，可复制 CSS 或导出 PNG、JPG、SVG、CSS 文件和资源包。

代码格式按开发场景选择声明方式

代码模式

类名 / 变量名

包含兜底背景色压缩代码

CSS代码

图片尺寸自定义尺寸会用于图片与SVG导出

尺寸预设

JPG质量 92%

宽度(px)

高度(px)

下载资源资源包包含 CSS、SVG、PNG 和设置 JSON

实时预览

Gradient Preview 修改参数后会即时更新

类型线性

颜色节点2

导出尺寸1920x1080

代码长度0

使用说明

软件使用说明

设置渐变类型：选择线性渐变、径向渐变或圆锥渐变。线性适合横幅和网页背景，径向适合中心扩散效果，圆锥适合环形、色盘和装饰图案。
调整方向与形状：
- 线性渐变：可使用方向按钮，也可以通过角度滑块设置0-360度方向。
- 径向渐变：可设置圆形或椭圆、扩散范围、中心点X/Y位置。
- 圆锥渐变：可设置起始角度和中心点位置。
配置颜色节点：使用颜色选择器、HEX输入框、位置百分比和透明度参数控制每个颜色节点。可添加、删除、排序、反转颜色，并可一键均匀分布节点。
使用效果选项：可开启重复渐变、柔光层、暗角和细纹，让背景更适合网页首屏、卡片、海报和设计素材。
复制和导出：在“代码导出”中选择CSS类名、仅声明或CSS变量模式，可复制CSS代码，也可导出PNG、JPG、SVG、CSS文件和ZIP资源包。
保存和分享：在“保存分享”中保存当前设置，生成分享链接，或粘贴已有CSS渐变代码读取到工具中继续编辑。

常见问题

答：线性渐变沿直线方向过渡，适合网页背景、按钮和横幅；径向渐变从中心点向外扩散，适合聚光和层次背景；圆锥渐变围绕中心旋转，适合色盘、环形和装饰效果。

答：点击“添加颜色”增加颜色节点，然后分别设置颜色、位置百分比和透明度。节点位置会影响颜色过渡范围，也可以使用“均匀分布”快速整理节点。

答：重复渐变适合制作条纹、波纹、环形重复纹理等规律背景。线性和径向渐变可开启重复模式，圆锥渐变建议通过颜色节点和角度控制效果。

答：可导出PNG、JPG、SVG、CSS文件，也可以下载ZIP资源包。资源包包含CSS代码、SVG文件、PNG图片和设置JSON，便于归档和二次编辑。

答：复制生成的CSS代码后，粘贴到网页样式文件中即可。工具提供CSS类名、仅声明和CSS变量三种模式，可按项目习惯选择。

答：可以。在“保存分享”中的“导入CSS”区域粘贴linear-gradient、radial-gradient或conic-gradient代码，点击“读取到工具”后即可继续调整颜色、角度和位置。

答：不会。渐变生成、代码复制、图片绘制和资源打包都在本地完成，不需要上传设计内容到服务器。

在线渐变背景生成器

工具加载中，请稍等...

工具使用

设置渐变

代码导出

保存分享

使用说明

软件使用说明

常见问题

问：线性、径向、圆锥渐变有什么区别？

问：如何制作多色渐变？

问：重复渐变适合什么场景？

问：可以导出哪些文件？

问：导出的CSS代码如何使用？

问：已有渐变代码可以继续编辑吗？

问：文件会上传到服务器吗？

同类工具推荐

Base64图片转换工具

图片背景去除工具

Logo生成器

HEIC转JPG工具

批量图片去水印工具

GIF转静态图工具

LED滚动字幕生成器

图片DPI修改工具

渐变背景图批量生成工具

图像主要颜色分析工具