CSS 渐变生成器
选择起始色、结束色与渐变角度，实时生成可复制的 CSS linear-gradient 代码。
三步上手
- 1定两端：选起始色与结束色（可加多个色标）。
- 2调角度：拖动角度滑块实时预览渐变效果。
- 3复制：一键拷贝可直接粘贴的 linear-gradient() CSS 代码。
渐变生成器
选择两个颜色与渐变角度，实时生成可复制的 CSS 线性渐变。
#FF6633
#2457D6
linear-gradient(120deg, #ff6633, #2457d6)
CSS linear-gradient 语法是什么？
语法为 linear-gradient(角度, 起始色, 结束色)，如 linear-gradient(120deg, #ff6633, #2457d6)。可直接用作 background 属性值。
渐变角度的方向如何对应？
0deg 从下到上，90deg 从左到右，180deg 从上到下，270deg 从右到左。默认值为 180deg（自上而下）。
CSS 渐变：三种类型、色标写法与常见坑
CSS 渐变是由浏览器生成的图像（用在 background-image 上），不是颜色值。
三种基本类型：linear-gradient 沿一条直线过渡，
radial-gradient 从一个圆心向外扩散，
conic-gradient 绕中心按角度扫过（常用于饼图与色相环）。
选型的经验是：背景与按钮用线性，聚光与高光用径向，仪表盘与色轮用锥形。
渐变的主体是色标（color stop）：颜色 位置。
位置可以用百分比或长度；两个色标位置相同会形成硬边（无过渡），
这正是用渐变画分割线、条纹背景的技巧。
只写颜色不写位置时浏览器会平均分配，写位置则可以精确控制过渡节奏。
最常见的质量问题是色带断层（banding）：大面积的平缓渐变在 8 位色深下会出现可见的台阶， 在暗色渐变上尤其明显。缓解办法有三：缩短过渡距离、加入极轻的噪点或纹理、 或使用支持更高色深的写法（如广色域颜色函数）并在目标设备上实测。 另一个常见坑是在 sRGB 空间做大幅色相过渡：从蓝直接渐变到黄，中间会经过发灰的区域； 插入一个中间色标（例如先到青绿）能让过渡干净得多。
性能与可维护性同样值得注意。渐变由浏览器实时绘制，
面积很大且叠加了动画时开销不低，动画应优先改变 background-position 或 transform；
同一组渐变在多处复用的话，把它写成 CSS 自定义属性（变量），改一处即全站生效。
另外，渐变上的文字对比度会随位置变化，
验收时请在最浅处与最深处各验一次，只测中间往往不够。
本工具生成的 CSS 可直接复制使用，所有计算都在浏览器本地完成； 需要确认可读性时，可把渐变两端的颜色拿到对比度检测里验一遍。
兼容性上，三种渐变在现代浏览器里都可用，锥形渐变的支持稍晚一些。
稳妥做法是先写一层纯色 background-color 作为回退，再叠加渐变，
这样老浏览器至少不会显示成透明。渐变里若用到较新的颜色函数（如相对颜色语法），
更应保留这层回退，避免整块背景失效。