CSS动画渐变背景生成器

在线制作动态渐变背景，支持多种颜色、动画方向、预设方案，一键生成CSS代码

BUG反馈

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

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

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

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

工具使用

返回旧版工具

先选择配色，再调整动画，完成后复制或下载代码。 预设方案可直接作为示例使用，也可以继续修改颜色、停靠点、方向、速度和输出用途。所有预览、生成和保存设置都在当前页面完成。

实时预览 CSS Keyframes 文字 / 边框 / 背景设置可保存

颜色数量-

动画方式-

持续时间-

输出用途-

配色设置

从示例方案开始会更快。颜色停靠点会影响渐变过渡的节奏，建议保留 2-6 个颜色。

示例方案 点击后会覆盖当前颜色

渐变基础 线性适合网页背景，径向适合聚光效果，圆锥适合边框或徽章

渐变类型

渐变角度 135°

135°

径向 / 圆锥中心

颜色停靠点 需保留 2 个颜色，可设置到 8 个颜色

动画参数

推荐使用较慢的流动速度作为页面背景。需要弱化动效时，可开启减少动态效果兼容代码。

动画方式 选择不同的 Keyframes 生成逻辑

运动方向 会影响 background-position 的关键帧

速度与循环 背景尺寸越大，颜色移动幅度越明显

动画持续时间 10s

10s

背景尺寸 400%

400%

动画曲线

无限循环往返播放悬停暂停减少动态效果兼容

生成导出

设置类名和应用场景后，复制 CSS 到项目样式文件中，再给目标元素添加对应类名。

应用设置 同一套配色可生成背景、文字或边框效果

CSS类名

输出用途

容器高度下限(px)

圆角(px)

边框宽度(px)

边框内层背景

生成的CSS代码

示例HTML

实时预览

Animated Gradient 调整颜色、方向和速度后，效果会立即更新。适合网页首屏、按钮区域、活动页背景和视觉卡片。 CSS Ready

渐变类型-

方向-

尺寸-

类名-

使用说明

软件使用说明

选择配色方案：在“配色设置”中点击示例方案，或手动添加、删除、调整颜色和停靠点。
设置渐变类型：选择线性、径向或圆锥渐变，并按需要调整角度和中心位置。
配置动画参数：在“动画参数”中设置流动方式、运动方向、持续时间、背景尺寸、动画曲线和循环方式。
选择输出用途：在“生成导出”中选择背景容器、渐变文字或渐变边框，并设置CSS类名、圆角、边框等参数。
预览效果：右侧可切换背景、卡片、文字、边框预览模式，确认效果后再生成代码。
复制或下载代码：点击“复制CSS”“复制HTML”或“下载CSS”，将代码应用到页面元素中。
保存设置：点击“保存设置”可保留当前参数，便于下次继续编辑。

常见问题

答：复制CSS代码到样式文件中，再把示例HTML里的类名添加到需要显示渐变的元素上即可。

答：线性渐变适合页面背景和横幅；径向渐变适合聚光、柔和扩散效果；圆锥渐变适合边框、徽章和旋转感视觉。

答：可以增大背景尺寸、增加颜色数量、调整颜色停靠点，或选择对角流动、呼吸流动等动画方式。

答：可以。在输出用途中选择“渐变文字”，工具会生成包含background-clip:text的CSS代码。

答：一般页面背景可以正常使用。若页面中动画较多，建议延长动画时间、减少颜色数量，并开启减少动态效果兼容代码。

CSS动画渐变背景生成器

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

工具使用

配色设置

动画参数

生成导出

使用说明

软件使用说明

常见问题

问：生成的CSS代码如何使用？

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

问：动画效果看起来不明显怎么办？

问：可以制作渐变文字吗？

问：动画会影响页面性能吗？

同类工具推荐

小红书iPad平板风格封面制作

小红书视觉冲击风格封面制作

照片边框水印生成器

批量图片添加文字水印工具

PNG压缩优化工具

小红书笔记本风格封面制作工具

图片拼接长图工具

图片拼接工具

CSS Clip-Path裁剪路径生成器

颜色搭配推荐工具