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