免费在线CSS渐变色生成器，支持线性渐变和径向渐变。选择起始/结束颜色，调整方向、步数和渐变类型，一键复制CSS代码。纯前端Canvas渲染。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用颜色设置
#06b6d4
#f472b6
快速预设
渐变设置
👁️ 预览
background: linear-gradient(to bottom, #06b6d4, #f472b6);
使用说明
Hex渐变色生成器是一款纯前端CSS渐变方案工具。选择起始和结束颜色，调整渐变类型（线性/径向）、方向和中间色步数，实时预览渐变效果。
点击「复制CSS代码」即可一键复制标准的CSS gradient代码，直接用于你的网页项目中。点击「随机颜色」快速获取配色灵感。
支持「硬边」、「平滑」、「非常平滑」三种柔和度模式。中间色步数可让你在两色之间插入更多的过渡颜色，创造更丰富的渐变效果。