支持线性渐变和径向渐变两种常见模式。
设计工具两类渐变 随机配色 直接出 CSS
在线 CSS 渐变生成工具
支持线性与径向渐变、随机配色和动态流动效果，适合直接生成页面背景 CSS。
Banner 背景活动页氛围图层按钮与卡片装饰
一键生成新的颜色组合，适合找灵感。
预览效果和 CSS 代码同步变化，复制后即可落地。
CSS 渐变生成
适合快速生成按钮背景、Banner 背景、卡片氛围光和动态渐变代码。
状态支持线性渐变、径向渐变、随机配色和 CSS 代码复制。
预览效果
Gradient Hero当前代码已经适合直接贴进页面或组件样式里。
CSS 代码
.gradient-surface {
background: linear-gradient(135deg, #1677FF 0%, #5B5CF0 50%, #8B5CF6 100%);
}常见问题
可以生成动态渐变吗？
可以，开启动态流动后会同步输出带 keyframes 的 CSS 代码。
适合只做灵感参考吗？
可以，随机渐变也很适合先找方向，再手动微调颜色位置。