linear 与 radial 的区别
linear-gradient 沿一条直线过渡，通过角度控制方向：0deg 向上，90deg 向右，180deg 向下。写成 to right 也能表达方向，但角度更灵活。
radial-gradient 从中心向外辐射，适合做光晕、圆形卡片底色。它可以用 circle at 50% 50% 指定形状与圆心位置。
色标可指定位置，如 #22c55e 50%，让过渡在指定处发生；只写颜色则自动均分。渐变是 CSS 原生能力，不产生任何图片请求，性能优于背景图。
常见问题
为什么预览好看，页面里却不一样？
预览区是固定尺寸的方块。真实元素的长宽比不同，同一角度会呈现不同观感。建议在目标元素上实测，必要时配合 background-size 调整。
能叠加多个渐变吗？
可以。把多个 linear-gradient 用逗号分隔即可叠加，前一个在上层。本工具生成单层代码，多层可据此手动组合。
复制的代码怎么用？
直接把 background: …; 粘贴到 CSS 规则里即可。linear-gradient(...) 也能用于 border-image、文字渐变（配合 background-clip:text）等场景。
适用场景
- 给网站首页的头部区域做一层柔和的双色背景
- 设计登录按钮的高亮效果，快速试几种配色
- 做活动海报时生成多段过渡的底图
- 把老项目里手写的渐变替换成更规范的写法
注意事项
- 预览由当前浏览器渲染，换浏览器或者系统开了深色模式，颜色可能有细微差别
- 色标位置按百分比计算，两个色标压在同一位置会出现硬边，中间加一个过渡色标会更顺
- 生成的是标准 CSS 渐变写法，很老的浏览器不支持，需要另外配一张回退背景图
- 代码只包含 background 属性，背景尺寸、重复方式这些要自己补上
- 所有调整都在本地完成，你的配色方案不会被上传
- 径向渐变的形状与圆心位置参数，在部分旧版本浏览器里表现不一致