在CSS3中，線性漸變指的是一條直線上進行的漸變。在網頁中，大多數漸變效果都是線性漸變。
語法：
background:linear-gradient(方向，開始顏色，結束顏色);
說明：
線性漸變的方向取值有2種，一種是使用角度（deg），另外一種是使用關鍵字：
第2個參數和第3個參數，表示開始顏色和結束顏色，取值可以為關鍵字、十六進制顏色值、RGBA顏色等。你可以使用在線調色板來獲取顏色值。線性漸變可以有多個顏色值。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3線性漸變</title>
<style type="text/css">
div
{
width:200px;
height:150px;
background:linear-gradient(to right,blue,yellow);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
“background:linear-gradient(to right,blue,yellow);”表示線性漸變方向為“從左到右”，開始顏色為藍色（blue），結束顏色為黃色（yellow）。
如果使用“background:linear-gradient(to left,blue,yellow);”，在浏覽器預覽效果如下：
這裡要特別注意一下線性漸變的方向問題，顏色值相同，由於漸變方向不同，實際得到的效果也會不一樣。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3線性漸變</title>
<style type="text/css">
div
{
width:200px;
height:150px;
background:linear-gradient(to right, red, orange,yellow,green,blue,indigo,violet);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
這裡同時定義了多種顏色的線性漸變效果。