CSS渐变生成器
只需添加两个或更多颜色节点，即可实时预览并生成linear-gradient或radial-gradient的CSS代码。可自由调整角度和节点位置，生成的代码一键复制即可使用。
使用提示
- 最多可添加6个颜色节点，自由调整每个节点的颜色和位置（%），从而制作出复杂的多色渐变效果。
- 线性渐变中，0度表示从下到上变化，90度表示从左到右变化，拖动滑块即可直观调整角度。
- 径向渐变没有角度的概念，颜色会以圆形方式从中心向外扩散。
- 点击“复制CSS”按钮，即可将生成的代码复制到剪贴板，直接粘贴到样式表中使用。
常见问题
linear-gradient沿指定的角度以直线方式过渡颜色，常用于按钮或条状背景设计。而radial-gradient从中心点以圆形或椭圆形向外扩散颜色，适合表现聚光灯效果或立体感。
在CSS的linear-gradient()中，角度以度（deg）为单位指定。0deg表示从下到上，90deg表示从左到右，180deg表示从上到下。需要注意的是CSS的角度是按顺时针方向计算的，这与数学上0度指向右侧的常规定义不同。
颜色节点的位置表示该颜色在渐变起点（0%）到终点（100%）之间所处的位置。通过调整位置的分布，可以让颜色在某些区域变化得平缓，在另一些区域变化得急促。
linear-gradient和radial-gradient在Chrome、Firefox、Safari、Edge等所有主流浏览器中均可直接使用，无需添加浏览器前缀，甚至可追溯到IE10。除非需要兼容非常老旧的移动端浏览器，否则无需额外处理。
闲话 ― CSS渐变为何取代了渐变图片
在CSS3出现之前，网页上的渐变背景通常是用图像编辑软件制作成PNG或JPEG图片后作为背景使用的。但这种方法存在不少问题：额外的图片请求会拖慢页面加载速度，在响应式布局中放大后画质会变得模糊，而仅仅想修改一种颜色也需要重新导出整张图片。
2010年代初期，浏览器陆续实现了linear-gradient和radial-gradient语法后，这些问题基本得到了解决。由于渐变完全用文本描述，文件体积轻量，无论放大缩小画质都不会劣化，修改颜色也只需编辑样式表中的几个数值即可完成。
早期实现中，不同浏览器需要不同的厂商前缀（-webkit-、-moz-、-o-等）且语法略有差异，开发者不得不为同一条规则编写多个带前缀的版本。如今随着W3C完成标准化，无前缀的标准写法已经可以在所有主流浏览器中稳定运行。