渐变动画

渐变动画是一个在线工具，创建动态渐变背景。支持多色渐变、动画速度、方向控制，输出CSS代码。

颜色 1

颜色 2

方向

时长: 3s

CSS 代码

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animated-gradient {
  background: linear-gradient(to right, #ff0000, #0000ff);
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
}

什么是渐变动画？

渐变动画是一个在线工具，创建动态渐变背景。支持多色渐变、动画速度、方向控制，输出CSS代码。

使用场景

网页背景
按钮样式
卡片设计
加载动画

功能特点

多色渐变
动画速度控制
方向和角度
CSS代码输出

常见问题

专业提示

使用建议：建议在使用前备份原始数据，以便在需要时恢复。对于大批量处理，可以分批进行以确保稳定性。