CSS 渐变生成器
可视化生成线性/径向渐变，实时预览并复制 CSS 代码。
使用说明
- 选择渐变类型：线性（linear）沿指定方向过渡，径向（radial）从中心向外圆形扩散。
- 线性渐变时可拖动角度滑块（0–360°）调整方向；切换为径向后角度滑块会自动隐藏。
- 为每个颜色停靠点设置色值与位置百分比，可通过「添加停靠点」增加到 5 个，或删除到最少 2 个。
- 预览区会实时呈现渐变效果，满意后点击「复制」获取多行格式的 CSS 代码，粘贴进样式表即可。
- 缺少灵感时点击「随机配色」，自动生成一组和谐的渐变颜色。
常见问题
生成的 CSS 代码兼容性如何？
linear-gradient 与 radial-gradient 是 CSS 标准语法，Chrome、Edge、Firefox、Safari 等所有现代浏览器及主流移动浏览器均原生支持，无需再写 -webkit- 前缀。
为什么径向渐变没有角度滑块？
径向渐变从中心向外呈圆形扩散，视觉效果由中心点与形状决定，而不是角度。本工具采用 circle at center 的标准写法，因此切换到径向时会隐藏角度滑块。
停靠点的位置可以乱序填写吗？
可以。CSS 允许停靠点按任意位置排列，浏览器会按位置自动排序渲染；预览与生成的代码始终一致，您也可以利用这一点做回跳式渐变效果。
随机配色是怎么生成的？
以一个随机色相为基准，按固定间隔派生出一组 HSL 颜色，并把饱和度与亮度控制在适合做渐变的区间，同时把停靠点均匀分布，因此每次的结果都比较和谐耐看。