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

打开就自带一个紫色到粉色的线性渐变预览拖拽调角度、点「 添加颜色」加停止点或者直接点「 随机配色」换一套配色想快就点预设里的日落、海洋、极光、彩虹右边马上吐出background: linear-gradient(...)一段能直接粘进项目里的 CSS。先看成品再讲这次怎么用华为云 CodeArts 码道 WebUI 一段话把它做出来、部署上线。这个工具做什么它把「手写 CSS 渐变」这件麻烦事变成可视化拖拽三种渐变类型线性Linear、径向Radial、圆锥Conic点一下切换。角度随心调拖滑块、或在预览区按住鼠标扫一圈角度实时变化。颜色停止点默认紫→粉两个停止点可「 添加颜色」加更多每个点都能改颜色、位置、透明度还能拖拽排序。预设渐变内置日落、海洋、紫梦、火焰、森林、天空、糖果、极光、玫瑰、阳光、霓虹、彩虹 12 套点一下直接套用。一键随机 随机配色按相近色相自动生成 2–4 个和谐色↔ 反转颜色反向排一遍。即拿即用右侧实时生成background: linear-gradient(...)点「 复制代码」直接粘进 CSS/内联样式。纯前端所有计算都在浏览器本地完成不上传服务器。码道开通免费体验版开始之前先免费开通码道体验版。不需要装任何软件浏览器就能用https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwsfsourceaddmzntgwwbwz开通后有三种使用方式WebUI浏览器对话、TUI终端命令行和桌面 IDEIDE 插件。本文用 WebUI 版演示。进入 AI 开发者空间浏览器打开 https://devstation.developer.huaweicloud.com/aidevspace?utm_sourceopcsfsqutm_mediumwbwz弹窗「请选择要进入的版本」→ 点击体验版首次使用会跳到华为云登录页扫码登录一次后续浏览器会话复用弹窗「临时凭据自动配置」→ 点击同意沙箱自动创建进入 AI 开发者空间主界面后先等左侧菜单加载出来再找到CodeArts点击它右侧的浏览器图标打开码道 WebUI 对话窗口打开后码道 WebUI 底部输入框提示「尽管吩咐我来帮你搞定」小贴士体验版沙箱 3 小时后自动重置生成完记得把index.html下载保存。任务描述在码道 WebUI 输入框粘贴以下需求回车发送模型默认glm-5.2可直接用开发一个「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颜色停止点先按位置排序再拼成字符串三种类型共用同一套停止点数据functionbuildGradient(){conststopsstate.colors.slice().sort((a,b)a.pos-b.pos).map(c${rgbaStr(c.color,c.alpha)}${c.pos}%).join(, );if(state.typelinear){returnlinear-gradient(${state.angle}deg,${stops});}elseif(state.typeradial){constrstate.radial;returnradial-gradient(${r.shape}${r.size}at${r.x}%${r.y}%,${stops});}else{constcstate.conic;returnconic-gradient(from${c.angle}deg at${c.x}%${c.y}%,${stops});}}2. 透明度单独存用 rgba 输出颜色本体存 hex透明度单独存alpha输出时透明度为 1 直接给 hex否则转成rgba(r, g, b, a)代码更干净functionhexToRgb(hex){constrparseInt(hex.slice(1,3),16);constgparseInt(hex.slice(3,5),16);constbparseInt(hex.slice(5,7),16);return{r,g,b};}functionrgbaStr(color,alpha){const{r,g,b}hexToRgb(color);returnalpha1?#${color.slice(1)}:rgba(${r},${g},${b},${alpha});}3. 随机配色用 HSL 保证和谐随机色不是纯瞎撞而是固定一个基色相后续颜色按 60°–120° 间隔延展饱和度/亮度也限定在舒服区间再用 HSL→Hex 转成标准色值document.getElementById(randomBtn).onclick(){constn2Math.floor(Math.random()*3);constbaseHMath.random()*360;state.colors[];for(leti0;in;i){consth(baseHi*(60Math.random()*60))%360;consts60Math.random()*35;constl45Math.random()*25;state.colors.push({color:hslToHex(h,s,l),pos:Math.round(i/(n-1)*100),alpha:1});}// ...};4. 预览区按下拖动 调角度不用滑块也能调在预览区按住鼠标根据鼠标相对中心的角度反解出渐变角度Math.atan2一把算好functionupdateAngleFromMouse(e){constrectpreview.getBoundingClientRect();constcxrect.leftrect.width/2;constcyrect.toprect.height/2;constdxe.clientX-cx;constdye.clientY-cy;letdegMath.atan2(dy,dx)*180/Math.PI90;if(deg0)deg360;state.angleMath.round(deg);render();}5. 预设直接用渐变函数渲染缩略图12 个预设的小色块不是贴图而是拿同一套buildGradient思路拼出 CSS 直接当背景点一下就把整组参数写回statefunctionrenderPresets(){constboxdocument.getElementById(presets);presets.forEach((p,i){conststopsp.colors.map(c${c.c}${c.p}%).join(, );letbgp.typelinear?linear-gradient(${p.angle||135}deg,${stops}):p.typeradial?radial-gradient(circle,${stops}):conic-gradient(${stops});div.style.backgroundbg;div.onclick()applyPreset(p);});}直接下载试玩本次生成的项目就是单文件index.html没有第三方依赖把文件保存到本地后双击用浏览器打开即可运行。源码同步到公开 Demo Park 仓库Demo Park 仓库https://atomgit.com/deli007/demo_park本案例目录https://atomgit.com/deli007/demo_park/tree/main/codearts-css-gradient-generator总结CSS 渐变生成器把「配色 → 调角度 → 调透明度 → 出代码」串成了一条可视化流水线同一个state.colors数据既能渲染右侧预览又能拼出三种渐变语法预设、随机、反转、拖拽排序都在改这同一份数据后render()一把刷新。技术上主要是字符串拼接生成 CSS、HSL 随机配色、以及预览区鼠标角度反解纯前端零依赖。后续还可以加「复制整段内联样式」「色值键盘输入」「导出 SVG 渐变」。如果还没用过码道可以免费开通体验版https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwsfsourceaddmzntgwwbwz