CSS3渐变（gradients）可以在两个或多个指定的颜色之间显示平稳的过渡。在CSS3之前（例如CSS2）必须使用图像来实现这些效果。而通过使用CSS3渐变，可以无需图片来实现类似的效果，从而减少下载时间和带宽的使用，并且加快了渲染速度。此外，渐变效果的元素在放大时看起来效果更好，因为渐变是由浏览器生成的。

CSS3定义了两种类型的渐变：

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
• 径向渐变（Radial Gradients）- 由它们的中心定义

CSS3线性渐变

为了创建一个线性渐变，必须至少定义两种颜色结点。颜色结点即想要呈现平稳过渡的颜色。同时还可以设置一个起点和一个方向（或一个角度）。线性渐变的语法如下（默认是从上到下的）：

background-image: linear-gradient([direction], color-stop1, color-stop2, ...);

譬如从上到下的线性渐变：

#grad {
    background-image: linear-gradient(rgb(..), rgb(..));
}

譬如从左到右的线性渐变：

#grad {
  background-image: linear-gradient(to right, red, yellow);
}

譬如对角的线性渐变（从左上角开始到右下角结束）：

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

或者也可以使用角度，如果想要在渐变的方向上做更多的控制，可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right等等）。
角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg将创建一个从下到上的渐变，90deg将创建一个从左到右的渐变。但是，有一些浏览器的版本（Chrome、Safari、Firefox等）使用了旧的标准，即0deg将创建一个从左到右的渐变，90deg将创建一个从下到上的渐变。使用角度的实例如下：

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

同样的也可以使用多个颜色结点，例如下面这个带有多个颜色节点的从上到下的实例：

#grad {
  background-image: linear-gradient(red, yellow, green);
}

CSS3渐变也支持透明度（transparent），可用于创建减弱变淡的效果。为了添加透明度，我们使用rgba()函数来定义颜色结点。rgba()函数中的最后一个参数可以是从0到1的值，它定义了颜色的透明度：0表示完全透明，1表示完全不透明。下面的实例是带有透明度的线性渐变：

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

CSS3径向渐变

为了创建一个径向渐变，也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是center（表示在中心点），渐变的形状是ellipse（表示椭圆形），渐变的大小是farthest-corner（表示到最远的角落）。径向渐变的语法如下：

background-image: radial-gradient([shape], start-color, ..., last-color);

譬如颜色结点均匀分布（默认情况下）的径向渐变：

#grad {
  background-image: radial-gradient(red, yellow, green);
}

譬如颜色结点不均匀分布（默认情况下）的径向渐变：

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

shape参数定义了形状。它可以是值circle或ellipse。其中，circle表示圆形，ellipse表示椭圆形。默认值是ellipse。譬如形状为圆形的径向渐变：

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}