渐变生成器

📖 工具介绍

渐变生成器是一款专为前端与视觉设计师打造的在线 CSS 渐变创作工具，让您用拖拽色标的方式，直观地拼出漂亮的线性渐变，并直接导出可粘贴使用的 linear-gradient 代码。页面最上方是一块大尺寸实时预览区，任何调整都会立刻反映在这块区域；中间是角度控制器，用滑块或数字框设置渐变方向；下方是一条色条，每个圆点代表一个色标，点击即可选中，按住拖动即可改变它在渐变中的位置，选中后还能用取色器改颜色、用数字框精确定位百分比。色标可在 2 到 5 个之间自由增减，新增时自动插入到相邻两色标之间的中点，方便快速扩展。工具会按位置自动排序并生成标准 CSS3 语句，所有插值由浏览器按标准色彩模型完成，保证输出与预览完全一致。全程离线运行，无需注册，打开即可创作。

✨ 功能特点

• 拖拽色标：在色条上直接拖动圆点，位置实时跟随，所见即所得
• 角度自由：0–360° 任意方向，90° 横向、180° 纵向，滑块与数字框双向同步
• 色标增删：2–5 个色标灵活组合，新增自动取相邻中点，删除自动保护最少两个
• 精确位置：每个色标可用百分比数字框精确定位，误差为零
• 标准代码导出：生成规范的 linear-gradient 语句，附带 background 属性，复制即用
• 一键示例与下载：内置多色示例快速体验，代码可保存为 .css 文件归档

📝 使用方式

1. 拖动角度滑块，或在数字框输入 0–360 的度数，设定渐变方向
2. 点击色条上的圆点选中某个色标，被选中的圆点会高亮放大
3. 用取色器改该色标的颜色，或用百分比数字框精调位置
4. 需要更多颜色时点「添加色标」，多余时点「删除色标」
5. 满意后点击「复制代码」把 linear-gradient 语句粘贴到项目，或「下载 CSS」保存

⚠️ 注意事项

• 色标数量：最少 2 个、最多 5 个色标，超出范围会给出友好提示
• 位置排序：色标在代码中会按位置从小到大自动排列，无需手动排序
• 角度周期：角度以 360° 为周期自动归一，输入 400° 会被换算为 40°
• 本地运算：渐变渲染与代码生成均在浏览器完成，不发送任何网络请求
• 兼容性：linear-gradient 为现代浏览器标准语法，极老内核请自行加前缀