CSS 渐变生成器
把 2–5 个颜色混合成线性、径向或锥形 CSS 渐变:实时预览、即贴即用的代码,还有一键随机和谐配色。
色标
预设配色
角度: 135°
实时预览
CSS 代码
background-color: #7C3AED; /* fallback for old browsers */ background-image: -webkit-linear-gradient(135deg, #7C3AED 0%, #EC4899 100%); background-image: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
0° 朝上、90° 朝右,角度顺时针递增。
该工具完全在你的浏览器中运行,数据不会离开你的设备,不会上传到任何服务器。
使用方法
- 1设置 2–5 个颜色,或从预设配色开始。
- 2选择渐变类型,再调角度或形状;需要时固定色标位置。
- 3复制 CSS 代码块,粘贴进样式表。
CSS 渐变生成器
选 2 到 5 个颜色,切换线性、径向或锥形,拖动角度——预览随输入实时更新,CSS 永远一键可复制。色标位置留空时按 CSS 规则自动布置;填上精确百分比就能做出硬分隔和偏心混合。
输出的是真正的生产级代码块:给上古浏览器准备的纯色回退行、给老 WebKit 内核准备的 -webkit- 前缀行,最后是标准语法。随机和谐按钮会在 HSL 空间旋转整组色相,每次洗牌都保持协调,不会变得刺眼。
常见问题
CSS 里为什么带一行 -webkit- 前缀?
这是给老 WebKit 内核(大约 Safari 5–6 时代)准备的兼容行,它们只认 -webkit-linear-gradient。近十年的浏览器都读标准行;如果不需要照顾那些老版本,直接删掉前缀行即可——留着只多一行,删掉也没损失。
线性渐变的角度是什么意思?
角度表示渐变行进的方向,从正上方起顺时针计量:0deg 自下而上,90deg 从左到右,180deg 自上而下。工具会把你输入的任意角度归一化(−45 变 315),-webkit- 行里老语法的方向相反问题也已代你处理。
什么时候用锥形渐变而不是线性或径向?
锥形渐变围绕中心点扫过颜色——饼图、角度表盘、日冕效果都是它做的。线性沿直线混合,径向从中心向外扩散。同样的色标,几何完全不同,直接切换类型看预览,不用猜。
相关工具
嵌入这个工具
一行代码把工具放到你的网站——它在访客的浏览器里运行。
<iframe src="https://zoyku.com/zh/tools/gradient-generator?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — gradient-generator" loading="lazy"></iframe>100% 本地处理