渐变生成器的核心功能与工作原理
渐变生成器是一个用于创建 CSS 渐变的在线工具。通过选择渐变类型、调整方向或形状，并配置多个色标，用户可以实时预览渐变效果并一键复制生成的 CSS 代码。
在初始状态下，该工具提供两个默认色标：#6366f1 0% 和 #ec4899 100%。用户可以根据设计需求对这些参数进行实时调整。
渐变类型及其数学与视觉特性
CSS 渐变主要分为三种类型，每种类型在空间中分布颜色的方式各不相同：
- 线性：颜色沿着一条直线进行过渡，其方向由具体的角度决定。
- 径向：颜色从中心点向外扩散，呈现出圆形或椭圆形的视觉结构。
- 锥形：颜色绕着中心点顺时针扫过，形成类似色轮的渐变效果。
对于线性和锥形渐变，角度滑块用于精确控制方向。在坐标系中，0° 指向正上方，90° 指向正右方。径向渐变不依赖角度，而是通过选择圆形或椭圆来决定其向外扩散的几何轮廓。
色标的配置规则与限制
色标是固定在渐变路径特定位置上的颜色节点。
- 位置区间：每个色标的位置在 0%（起点）到 100%（终点）之间。
- 数量限制：工具最多支持添加八个色标。
- 默认值：新添加的色标默认位置为 50%。
- 界面交互：当色标数量达到八个的上限时，“添加色标”按钮将自动变为禁用状态。
浏览器本地处理与隐私说明
每个渐变都在你的浏览器里渲染,这里设置的内容不会上传到 BroBroGo。所有参数调整和代码生成均在本地运行。
适用人群与应用场景
该工具针对不同的网页设计与开发需求而设计：
- 需要快速创建 CSS 背景的网页设计人员。
- 需要微调两种颜色及一个方向的轻量级用户。
- 需要精细调整渐变类型、精确位置以及多达八个色标的资深前端开发人员。
在配置完成后，点击“复制 CSS”按钮，按钮状态会立即切换为“已复制”，此时生成的 CSS 代码已保存在剪贴板中，可直接应用于实际项目的样式表中。
常见问题
线性、径向、锥形渐变有什么区别?
线性渐变让颜色沿着一条直线过渡,方向由角度决定;径向渐变从中心向外扩散,可以是圆形或椭圆;锥形渐变则绕着中心转一圈,像色轮一样。
色标是什么?
每个色标就是固定在渐变某个位置上的一种颜色——起点是 0%,终点是 100%。拖动色标可以改变这种颜色最浓的位置,多加几个色标能让过渡更丰富,最多可以加八个。
怎么控制渐变方向?
线性和锥形渐变的方向由角度滑块控制,0° 朝上,90° 朝右。径向渐变没有角度,改选圆形或椭圆来调整它扩散的样子。