CSS 渐变生成器：拖两个颜色直接给代码，做按钮背景不用手写

打开就自带一个紫色到粉色的线性渐变预览，拖拽调角度、点「+ 添加颜色」加停止点，或者直接点「🎲 随机配色」换一套配色；想快就点预设里的日落、海洋、极光、彩虹，右边马上吐出 background: linear-gradient(...) 一段能直接粘进项目里的 CSS。先看成品，再讲这次怎么用华为云 CodeArts 码道 WebUI 一段话把它做出来、部署上线。

这个工具做什么

它把「手写 CSS 渐变」这件麻烦事变成可视化拖拽：

三种渐变类型：线性（Linear）、径向（Radial）、圆锥（Conic），点一下切换。
角度随心调：拖滑块、或在预览区按住鼠标扫一圈，角度实时变化。
颜色停止点：默认紫→粉两个停止点，可「+ 添加颜色」加更多，每个点都能改颜色、位置、透明度，还能拖拽排序。
预设渐变：内置日落、海洋、紫梦、火焰、森林、天空、糖果、极光、玫瑰、阳光、霓虹、彩虹 12 套，点一下直接套用。
一键随机：🎲 随机配色按相近色相自动生成 2--4 个和谐色，↔ 反转颜色反向排一遍。
即拿即用 ：右侧实时生成 background: linear-gradient(...)，点「📋 复制代码」直接粘进 CSS/内联样式。
纯前端：所有计算都在浏览器本地完成，不上传服务器。

码道开通（免费体验版）

开始之前，先免费开通码道体验版。不需要装任何软件，浏览器就能用：

developer.huaweicloud.com/codeartsco....

开通后有三种使用方式：WebUI（浏览器对话）、TUI（终端命令行）和桌面 IDE（IDE 插件）。本文用 WebUI 版演示。

进入 AI 开发者空间

浏览器打开 devstation.developer.huaweicloud.com/aidevspace?...
弹窗「请选择要进入的版本」→ 点击 体验版
首次使用会跳到华为云登录页，扫码登录一次，后续浏览器会话复用
弹窗「临时凭据自动配置」→ 点击同意，沙箱自动创建

进入 AI 开发者空间主界面后，先等左侧菜单加载出来，再找到 CodeArts ，点击它右侧的浏览器图标，打开码道 WebUI 对话窗口：

打开后码道 WebUI 底部输入框提示「尽管吩咐，我来帮你搞定」：

小贴士：体验版沙箱 3 小时后自动重置，生成完记得把 index.html 下载保存。

任务描述

在码道 WebUI 输入框粘贴以下需求，回车发送（模型默认 glm-5.2，可直接用）：

text 复制代码

开发一个「CSS 渐变生成器」网页应用：用户可以拖拽或用颜色选择器设置两个及以上颜色，实时预览线性/径向渐变效果，并能调整渐变角度、位置和透明度；自动生成可复制的 CSS 代码（linear-gradient/radial-gradient），支持一键复制、随机配色和预设渐变；界面简洁美观，单个网页打开即用。完成后用部署功能部署成可访问的网页应用，并告诉我访问地址。

这轮码道具体做了什么

不是复述通用 AI 能力，而是它在这篇项目里的实际动作：

在 /workspace/css-gradient-generator 下创建项目目录；
端口检测时同样遇到 PYTHONHOME 指向损坏 python3.12 的问题，先试 python3、再试 /usr/bin/python3，最后用纯 bash /dev/tcp 扫描找到空闲端口；
写出约 631 行的单文件 index.html；
检测到 3004 端口空闲，curl 自检拿到 <title> 后拼出内部访问地址。

代码亮点

以下是 index.html 里值得关注的设计思路和实现细节。

1. 一个函数拼出三种渐变语法

buildGradient() 按 state.type 分叉成 linear-gradient / radial-gradient / conic-gradient，颜色停止点先按位置排序再拼成字符串，三种类型共用同一套停止点数据：

javascript 复制代码

function buildGradient(){
  const stops = state.colors
    .slice()
    .sort((a, b) => a.pos - b.pos)
    .map(c => `${rgbaStr(c.color, c.alpha)} ${c.pos}%`)
    .join(', ');

  if (state.type === 'linear') {
    return `linear-gradient(${state.angle}deg, ${stops})`;
  } else if (state.type === 'radial') {
    const r = state.radial;
    return `radial-gradient(${r.shape} ${r.size} at ${r.x}% ${r.y}%, ${stops})`;
  } else {
    const c = state.conic;
    return `conic-gradient(from ${c.angle}deg at ${c.x}% ${c.y}%, ${stops})`;
  }
}

2. 透明度单独存，用 rgba 输出

颜色本体存 hex，透明度单独存 alpha，输出时透明度为 1 直接给 hex，否则转成 rgba(r, g, b, a)，代码更干净：

javascript 复制代码

function hexToRgb(hex) {
  const r = parseInt(hex.slice(1,3), 16);
  const g = parseInt(hex.slice(3,5), 16);
  const b = parseInt(hex.slice(5,7), 16);
  return { r, g, b };
}
function rgbaStr(color, alpha) {
  const { r, g, b } = hexToRgb(color);
  return alpha >= 1 ? `#${color.slice(1)}` : `rgba(${r}, ${g}, ${b}, ${alpha})`;
}

3. 随机配色用 HSL 保证和谐

随机色不是纯瞎撞，而是固定一个基色相，后续颜色按 60°--120° 间隔延展，饱和度/亮度也限定在舒服区间，再用 HSL→Hex 转成标准色值：

javascript 复制代码

document.getElementById('randomBtn').onclick = () => {
  const n = 2 + Math.floor(Math.random() * 3);
  const baseH = Math.random() * 360;
  state.colors = [];
  for (let i = 0; i < n; i++) {
    const h = (baseH + i * (60 + Math.random() * 60)) % 360;
    const s = 60 + Math.random() * 35;
    const l = 45 + Math.random() * 25;
    state.colors.push({ color: hslToHex(h, s, l), pos: Math.round(i / (n - 1) * 100), alpha: 1 });
  }
  // ...
};

4. 预览区按下拖动 = 调角度

不用滑块也能调：在预览区按住鼠标，根据鼠标相对中心的角度反解出渐变角度，Math.atan2 一把算好：

javascript 复制代码

function updateAngleFromMouse(e) {
  const rect = preview.getBoundingClientRect();
  const cx = rect.left + rect.width / 2;
  const cy = rect.top + rect.height / 2;
  const dx = e.clientX - cx;
  const dy = e.clientY - cy;
  let deg = Math.atan2(dy, dx) * 180 / Math.PI + 90;
  if (deg < 0) deg += 360;
  state.angle = Math.round(deg);
  render();
}

5. 预设直接用渐变函数渲染缩略图

12 个预设的小色块不是贴图，而是拿同一套 buildGradient 思路拼出 CSS 直接当背景，点一下就把整组参数写回 state：

javascript 复制代码

function renderPresets(){
  const box = document.getElementById('presets');
  presets.forEach((p, i) => {
    const stops = p.colors.map(c => `${c.c} ${c.p}%`).join(', ');
    let bg = p.type === 'linear' ? `linear-gradient(${p.angle||135}deg, ${stops})`
           : p.type === 'radial' ? `radial-gradient(circle, ${stops})`
           : `conic-gradient(${stops})`;
    div.style.background = bg;
    div.onclick = () => applyPreset(p);
  });
}

直接下载试玩

本次生成的项目就是单文件 index.html，没有第三方依赖，把文件保存到本地后双击用浏览器打开即可运行。源码同步到公开 Demo Park 仓库：

Demo Park 仓库：atomgit.com/deli007/dem...
本案例目录：atomgit.com/deli007/dem...

总结

CSS 渐变生成器把「配色 → 调角度 → 调透明度 → 出代码」串成了一条可视化流水线：同一个 state.colors 数据，既能渲染右侧预览，又能拼出三种渐变语法，预设、随机、反转、拖拽排序都在改这同一份数据后 render() 一把刷新。技术上主要是字符串拼接生成 CSS、HSL 随机配色、以及预览区鼠标角度反解，纯前端零依赖。后续还可以加「复制整段内联样式」「色值键盘输入」「导出 SVG 渐变」。

如果还没用过码道，可以免费开通体验版：developer.huaweicloud.com/codeartsco....