使用CSS实现渐变在UI设计中是非常常见的，它可以为页面增加更加立体感和视觉效果。下面大家就来看一下怎样使用CSS来实现这个效果。
首先，大家需要使用渐变函数（gradient function）来让CSS知道大家想要应用渐变。渐变函数有两种：linear-gradient和radial-gradient。
一个线性渐变示例代码：
p {
background: linear-gradient(to right, #000, #fff);
}在这个例子中，大家使用了to right的方向参数来指定渐变的方向，#000代表渐变的起始颜色，#fff代表了渐变的结束颜色。如果大家想实现水平方向的渐变可以使用to right，反之，如果大家想实现垂直方向的渐变可以使用to bottom。
如果大家想要多个颜色之间平滑过渡，大家可以使用逗号分隔它们：
p {
background: linear-gradient(to right, #000, #fff, #000);
}大家也可以使用百分比来定义颜色的位置：
p {
background: linear-gradient(to right, #000, #fff 50%, #000);
}这里，大家定义了一个50%的白色渐变，也就是说中间的一半是白色。
现在，来看看用代码实现可以得到的不同渐变图形。以下的渐变示例代码中，大家假设背景应用在一个200×200的盒子上，代码如下：
p {
width: 200px;
height: 200px;
}现在大家将设置一个水平方向的渐变色条(从白色到黑色)：
p {
background: linear-gradient(to right, #fff, #000);
}结果：
如果大家想用一个垂直方向的渐变色条(从黑色到白色)，则可以这么写：
p {
background: linear-gradient(to bottom, #000, #fff);
}结果：
使用角度可以让渐变方向自定义，而不仅仅只是水平和垂直方向。下面的渐变例子展示了在盒子左上角到右下角方向上的渐变色条：
p {
background: linear-gradient(to bottom right, #000, #fff);
}结果：
同时，在背景中使用多个颜色和位置参数，可以创建更高级的渐变效果。例如下面的代码将创建一个有几个不同填充色相间的彩虹渐变：
p {
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 34%, #0ff 51%, #00f 68%, #f0f 85%, #f00 100%);
}结果：
使用CSS实现渐变是UI设计中的一个有益技能，为网页添加深度和颜色层次移情境，尝试在自己的项目中使用它来增加平面化设计的色彩和布局效果吧。