CSS 渐变生成器
拖色标、调角度，右边立刻看到真实效果，拿到的就是能直接粘进项目的 background-image 代码，不用再手写色标位置猜半天。
- 三种渐变：线性、径向、锥形，角度与位置都能调。
- 多色标：随时增删、拖动排序，位置精确到 1%。
- 拿得走：复制 CSS、下载 CSS 文件、导出 PNG 预览图。
调整渐变
实时预览色标数量 2~6 个；位置按顺序自动排序，重复位置会产生硬边。
生成的 CSS
兼容所有现代浏览器常用渐变预设
点击直接套用，可继续改AI 渐变点评
需人机验证让 AI 看看这段渐变适合放在哪、文字该用什么颜色、要不要加遮罩。首次点击会先弹出点选验证码。
渐变怎么写才不会翻车
渐变本身只有一行代码，难的是色标位置和对比度。
linear-gradient 的三个参数
方向（或角度）、色标、色标位置。linear-gradient(135deg, #7C5CFF 0%, #22D3EE 100%) 里，135deg 指从左下到右上的对角线：0deg 向上，90deg 向右，角度顺时针增加。省略角度时默认 to bottom。
色标位置决定「过渡在哪一段发生」
两个色标分别是 0% 和 100% 时，整块区域均匀过渡；把第二个改成 30%，后 70% 就几乎全是结束色，过渡被压在前段，看起来更利落。位置可以乱序写，浏览器会按位置排序，但位置相同时会形成硬边，这是做条纹的常用技巧。
渐变上的文字要先解决对比度
渐变两端的明度往往不一样，同一段白字在浅色端会糊。做法有三种：加一层半透明遮罩、把渐变整体压暗、或者限制渐变只出现在文字之外。表单与按钮上尤其要注意，悬停态还要再检查一次。
深色模式与性能
大面积渐变在低端机上会有明显的重绘开销，滚动区域里尽量用 background-attachment: scroll，别用 fixed。深色模式下高饱和渐变容易发亮，把色标明度各降一档会更耐看。
三种渐变怎么选
线性 linear
最常见，适合按钮、卡片头部、标语条。一条方向上的过渡，可控性最好。
径向 radial
从中心向外扩散，适合做聚光、光斑、头像背景与强调区域，注意中心点位置。
锥形 conic
绕中心旋转铺开，天然适合做进度环、色轮与仪表盘，色标位置对应角度。
常见问题
复制到项目里没生效，可能是什么原因？
先确认写的是 background-image 或 background 而不是 background-color；其次检查有没有被后面的简写覆盖；最后看元素高度是否为 0（渐变不撑开容器）。
为什么两个颜色之间出现了灰带？
RGB 空间里插值经过低饱和区，容易产生脏灰。做法是在中间加一个饱和度足够的过渡色标，或者把两个颜色先统一色相再过渡。
渐变条纹/硬边怎么做？
让两个色标位置相同即可，例如 #FFF 50%, #000 50%。多条相同间距的色标重复下去就是斑马纹，再叠加 repeating-linear-gradient 可以做斜纹背景。
导出的 PNG 有什么用？
给设计稿、PPT 或需要图片背景的场景用。PNG 由浏览器 canvas 在本地绘制，尺寸可按预览区比例输出，不会上传任何内容。