CSS 渐变生成器

CSS 渐变生成器（Gradient Generator）

可视化编辑线性、径向与锥形渐变，并实时生成可直接粘贴使用的 CSS 代码。纯 HTML/CSS/JavaScript 单文件实现，零依赖、零后端，所有计算在浏览器本地完成。

功能特性

• 三种渐变类型：线性 linear-gradient、径向 radial-gradient、锥形 conic-gradient

• 角度调节：线性与锥形渐变支持 0deg 至 360deg 角度滑块

• 径向参数：可选 circle 或 ellipse 形状，并设置中心点 X / Y 百分比

• 多颜色停靠点：支持 2 至 8 个停靠点，每个停靠点可独立设置颜色与 0% 至 100% 位置

• 自动排序：输出时按位置百分比升序排列，无需手动整理顺序

• 实时预览：参数变化即时反映到预览区块

• CSS 代码输出：生成完整 background: 声明，一键复制

• 随机渐变：一键生成随机配色与角度，用于获取灵感

• 颜色规范：#rgb 短十六进制自动补全为 #rrggbb

生成的代码示例

background: linear-gradient(90deg, #84cc16 0%, #0ea5e9 100%);
background: radial-gradient(ellipse at 20% 80%, #f71add 0%, #757b21 100%);
background: conic-gradient(from 180deg at 50% 50%, #84cc16 0%, #0ea5e9 100%);

使用场景

• 快速获取渐变代码：无需手写函数语法，调参即得 CSS

• UI 背景设计：为卡片、按钮、登录页挑选渐变配色

• 教学演示：直观对比三种渐变类型与角度、形状差异

• 离线使用：浏览器打开即用，不依赖任何网络资源

快速开始

无需安装与构建，直接用浏览器打开 index.html 即可使用，或在任意静态服务器下访问：

python3 -m http.server 8032
# 访问 http://localhost:8032/index.html

技术栈

• HTML5 + CSS3 + 原生 JavaScript（零第三方依赖）

• 基于状态的单向渲染：修改 state 后统一调用 render() 与 buildGradient()

• 剪贴板：navigator.clipboard.writeText