CSS渐变生成器
只需添加两个或更多颜色节点，即可实时预览并生成linear-gradient或radial-gradient的CSS代码。可自由调整角度和节点位置，生成的代码一键复制即可使用。
什么是 CSS 渐变
CSS 渐变是不借助图像、仅凭样式表便绘出由两种以上颜色平滑相接的色带或放射状纹样的机制。linear-gradient() 沿所指定的角度作直线式的色彩推移，radial-gradient() 则自中心向外画圆般扩散。因可用文字书写而轻量，放大也不会变粗糙，想改颜色时只需改写数值即可。
本工具可一面在画面上调整种类、角度与色标，一面当场确认结果，并把生成的 CSS 直接复制。色标最多可放6个，各自指定颜色与位置（%）。少于2个便不成其为渐变，会给出错误提示。另需注意角度采用 CSS 独有的取法：0deg 为自下而上，90deg 为自左而右，与数学所用角度的零点方向不同。圆形（radial）没有角度的概念，故角度的指定不起作用。
CSS 渐变的制作方法
- 选择种类 想让颜色作直线变化请选线性（linear），想自中心放射状扩散请选圆形（radial）。
- 决定角度 仅在线性时有效。0deg 为自下而上，90deg 为自左而右，按顺时针递增。可拖动滑块一边调整一边确认方向。
- 放置色标 用「添加颜色」最多可增至6个。为各色标指定颜色与位置（%），即可细致地操控颜色切换之处。
- 以预览确认 每次更改设定预览都会重绘，可当场判断色彩的交界是否过于生硬、方向是否合乎所想。
-
复制 CSS
按「复制 CSS」即放入剪贴板，可直接粘贴到样式表的
background中。
用好本工具的小技巧
- 最多可添加6个颜色节点，自由调整每个节点的颜色和位置（%），从而制作出复杂的多色渐变效果。
- 线性渐变中，0度表示从下到上变化，90度表示从左到右变化，拖动滑块即可直观调整角度。
- 径向渐变没有角度的概念，颜色会以圆形方式从中心向外扩散。
- 点击“复制CSS”按钮，即可将生成的代码复制到剪贴板，直接粘贴到样式表中使用。
与 CSS 渐变相关的术语
- linear-gradient
- 指绘制沿所指定角度作直线式色彩推移之渐变的 CSS 函数。适合带状背景与按钮的填充。
- radial-gradient
- 指绘制自中心点向外作圆形或椭圆形扩散之渐变的 CSS 函数，不具备角度的概念。
- 色标（color stop）
- 指在渐变途中放置的「此处用此色」的指定。位置以起点为0%、终点为100%的比例表示。
- 角度（deg）
- 指 linear-gradient 中颜色推移的方向。CSS 中 0deg 为自下而上，90deg 为自左而右，按顺时针递增，与数学一般所用角度的零点方向不同。
- 浏览器前缀
- 指如
-webkit-这般，在标准化之前各浏览器各自提供功能时所加的前缀。渐变已完成标准化，故现今不再需要。 - background 属性
- 指用以指定元素背景的 CSS 属性。渐变被视作背景图像的一种，故写于此处。
常见问题
闲话 ― CSS渐变为何取代了渐变图片
在CSS3出现之前，网页上的渐变背景通常是用图像编辑软件制作成PNG或JPEG图片后作为背景使用的。但这种方法存在不少问题：额外的图片请求会拖慢页面加载速度，在响应式布局中放大后画质会变得模糊，而仅仅想修改一种颜色也需要重新导出整张图片。
2010年代初期，浏览器陆续实现了linear-gradient和radial-gradient语法后，这些问题基本得到了解决。由于渐变完全用文本描述，文件体积轻量，无论放大缩小画质都不会劣化，修改颜色也只需编辑样式表中的几个数值即可完成。
早期实现中，不同浏览器需要不同的厂商前缀（-webkit-、-moz-、-o-等）且语法略有差异，开发者不得不为同一条规则编写多个带前缀的版本。如今随着W3C完成标准化，无前缀的标准写法已经可以在所有主流浏览器中稳定运行。