CSS 渐变生成器
可视化调节颜色与角度，实时预览并导出 CSS 渐变背景代码。
什么是 CSS 渐变？
CSS 渐变（Gradient）是 CSS 内置的背景绘制能力，无需图片即可在元素上生成平滑的色彩过渡。渐变主要分两种：线性渐变（linear-gradient）沿指定角度方向逐色过渡，适合网页顶部横幅、按钮背景；径向渐变（radial-gradient）从中心点向外扩散，适合聚光灯、光晕、玻璃拟态等效果。渐变由若干个「颜色停靠点」（color stop）组成，每个停靠点指定一种颜色及其在渐变路径上的位置（百分比），停靠点越多，渐变层次越丰富。
手写渐变语法很容易出错：角度方向记不清、百分比写错、颜色格式不统一，调试起来非常麻烦。本工具把渐变参数全部可视化：通过色块选择器调整每个停靠点的颜色，用滑块精确控制停靠点位置和线性渐变角度，径向渐变还能切换椭圆/正圆形状与中心位置。每次调整都会实时刷新预览区域并同步生成标准 CSS 代码，一键复制即可用到自己的项目里。
使用步骤
- 选择渐变类型：线性渐变或径向渐变；
- 线性渐变拖动「角度」滑块调整渐变方向，径向渐变选择形状与中心位置；
- 点击停靠点的色块选择颜色，拖动滑块调整停靠点位置；
- 点击「添加停靠点」增加颜色层次，点停靠点右侧按钮可删除多余停靠点；
- 预览区实时显示效果，点击「复制」按钮复制生成的 CSS 代码。
常见问题
线性渐变和径向渐变有什么区别？
线性渐变 linear-gradient 沿一条直线方向（由角度控制）逐色过渡；径向渐变 radial-gradient 从中心点向外扩散，可以控制形状为圆形或椭圆，适合做按钮光晕、聚光灯等效果。
颜色停靠点（color stop）是什么意思？
停靠点定义渐变路径上某个位置使用的颜色，例如「红 0% 蓝 100%」表示从起点红色渐变到终点蓝色。两个以上停靠点可以做出红黄绿三段式渐变，停靠点百分比表示颜色在渐变中的位置。
渐变角度 0deg 和 90deg 分别是什么方向？
0deg 是从下往上渐变（底部为起始颜色），90deg 是从左往右渐变。角度按顺时针计算，135deg 即常见的从左上到右下斜向渐变。
生成的渐变代码可以用于网页背景吗？
可以。把生成的 background 属性复制到元素的 CSS 中即可，所有现代浏览器都支持 linear-gradient 和 radial-gradient 语法，无需任何前缀。