CSS 渐变生成器
可视化生成 CSS linear-gradient 线性渐变、radial-gradient 径向渐变
与 conic-gradient 圆锥渐变：支持角度调节、方向预设、颜色停止点增删与位置调节、
径向中心位置控制、圆锥起始角度设置。实时预览效果，一键复制 CSS 代码。内置日落、海洋、极光、
饼图、色轮、进度环等 12 组预设渐变。适用于网页背景、按钮设计、饼图、色轮、进度环、
Banner 海报等前端开发场景。所有处理在浏览器本地完成。
background: linear-gradient(90deg, #ff6b6b 0%, #feca57 50%, #48dbfb 100%);
常见问题
linear-gradient、radial-gradient 和 conic-gradient 有什么区别？
线性渐变（linear-gradient）：颜色沿一条直线方向过渡，适合表现方向性的光照、
天空、条纹等效果。语法：linear-gradient(<angle>deg, color1 pos%, color2 pos%)。
径向渐变（radial-gradient）：颜色从中心点向外辐射扩散，适合表现光源、光晕、
聚光灯等效果。语法：radial-gradient(circle at x% y%, color1 pos%, color2 pos%)。
圆锥渐变（conic-gradient）：颜色围绕中心点旋转过渡，适合表现饼图、色轮、
进度环等环形图案。语法：conic-gradient(from <angle>deg at x% y%, color1 pos%, color2 pos%)。
三者可单独使用，也可用逗号分隔叠加（前层覆盖后层）。
渐变角度是怎么计算的？
linear-gradient 的角度以正上方为 0°，顺时针递增：0° 向上、90° 向右、
180° 向下、270° 向左。角度表示渐变线的方向——0° 时颜色从下到上过渡，90° 时从左到右过渡。
也可用关键字 to top / to right / to bottom / to left 或组合
to top right 表示对角方向。本工具同时提供 8 方向预设按钮与 0-360° 精确滑块。
颜色停止点（color stop）是什么？
颜色停止点定义渐变中某个位置的颜色，由颜色值与位置百分比组成，如 #ff0000 0% 表示
起点为红色、#0000ff 100% 表示终点为蓝色。两个停止点之间浏览器自动插值过渡。
位置百分比范围为 0%-100%，多个停止点按位置排序后生成渐变。本工具支持任意数量的停止点，
可自由增删与调节位置，实现三色、四色甚至更复杂的多色渐变。
径向渐变的中心位置怎么调节？
径向渐变用 at <x>% <y>% 指定中心点位置。x、y 均为 0-100 的百分比，
0% 0% 为左上角、50% 50% 为正中心、100% 100% 为右下角。例如
radial-gradient(circle at 30% 70%, ...) 表示中心点在左侧偏下位置。
本工具提供 X/Y 双滑块实时调节中心位置，配合预览区可直观看到辐射效果的变化。
渐变能用于哪些 CSS 属性？
渐变最常见的用途是 background 或 background-image 属性，
但它本质上是一个图像值，可用于任何接受图像的属性：
① background：元素背景渐变（最常用）
② border-image：渐变边框
③ list-style-image：渐变列表标记
④ mask-image：渐变遮罩（淡入淡出效果）
⑤ content（伪元素）：渐变生成的内容
注意：渐变不能用于 color、box-shadow 等只接受颜色的属性。
如何实现多色渐变与硬渐变？
多色渐变：添加 3 个以上颜色停止点即可，如
linear-gradient(90deg, #ff6b6b 0%, #feca57 50%, #48dbfb 100%)。
硬渐变（条纹）：让相邻停止点位置相同，颜色无过渡区域，产生硬边界条纹效果，
如 linear-gradient(90deg, #ff0000 50%, #00ff00 50%) 生成红绿各半的硬边界。
硬渐变是 CSS 绘制条纹背景、棋盘格、进度条等图案的核心技巧。
CSS 渐变的浏览器兼容性如何？
linear-gradient 与 radial-gradient 是 CSS3 的成熟特性，
所有现代浏览器（Chrome、Firefox、Safari、Edge）全面支持，IE10+ 也已支持。
角度值（如 45deg）、多色停止点、径向中心位置等特性在 IE10+ 均可用。
旧版浏览器需加 -webkit- 前缀（IE9-），现代项目无需前缀可直接用于生产环境。
圆锥渐变 conic-gradient 兼容性稍差（IE 不支持），但 Chrome 69+、Firefox 83+、
Safari 12.1+ 已全面支持，现代项目可放心使用。
conic-gradient 的 from 角度和 at 位置是什么？
from 角度：指定圆锥渐变的起始方向，以正上方为 0°，顺时针递增。
默认 0° 表示从 12 点钟方向开始，from 90deg 表示从 3 点钟方向开始。
at 位置：指定圆锥渐变的中心点，语法与径向渐变一致，用
at x% y% 表示。0% 0% 为左上角、50% 50% 为正中心、100% 100% 为右下角。
完整语法：conic-gradient(from 0deg at 50% 50%, #ff0000 0%, #0000ff 100%)。
本工具在圆锥模式下提供 from 角度滑块与 X/Y 中心位置滑块，实时调节起始方向与中心点。
如何用 conic-gradient 实现饼图和进度环？
饼图：利用硬边界（相邻停止点位置相同），让颜色在指定角度"跳变"。
如四等分饼图：conic-gradient(#ef4444 0% 25%, #f59e0b 25% 50%, #10b981 50% 75%, #3b82f6 75% 100%)。
简写语法 color 0% 25% 等价于 color 0%, color 25%。
进度环：用 transparent 透明停止点表示未完成部分，配合
border-radius: 50% 裁剪为圆形。如 65% 进度环：
conic-gradient(#2b6cff 0% 65%, transparent 65% 100%)。
本工具内置饼图、色轮、进度环等圆锥预设，一键应用后可自由调节参数。
conic-gradient 和 repeating-conic-gradient 有什么区别？
conic-gradient 的颜色停止点位置范围为 0%-100%（对应 0°-360°），
超出部分由最后一个停止点的颜色填充。
repeating-conic-gradient 会将停止点模式重复填充整个 360°，适合绘制
放射状重复图案，如齿轮、太阳光芒、棋盘格等。例如
repeating-conic-gradient(#ff0000 0% 10%, #0000ff 10% 20%) 生成红蓝交替的
18 等分重复图案。两者语法一致，区别仅在于是否重复。
数据会上传到服务器吗？
不会。本工具完全在浏览器内运行，所有渐变参数调节与 CSS 生成由 JavaScript 在你本地执行， 不会发送任何配置或代码到服务器。全程零网络请求，可离线使用。