CSS 3中的漸變屬性的支援度具體是：IE10、FF3.6+、Safari4.0+、Chrome、Opera11.1+、iOS3.2+、Opera Mobile11.1、Android，也就是說除了IE10以外其它的瀏覽器已經支援 CSS3 的漸變屬性了（雖然有些還在使用私有屬性）。【Opera暫不支援徑向漸變】

1、線性漸變（從頂到底）

div{
width:400px;
height:100px;
padding:5px;
border:1px solid #ccc;
background:-webkit-linear-gradient(top, blue, red);/* Safari, Chrome*/
background:-moz-linear-gradient(top, blue, red);/* Firefox*/
background:-o-linear-gradient(top, blue, red);/* Opera, Opera mobile*/
}

第一個引數是指從上開始，後面沒有方位引數自然就是下啦。blue，red為顏色值，即從上到下，由藍色到紅色漸變。當然我們也可以讓它變成從水平線性。

2、線性漸變（從左到右）

div{
width:400px;
height:100px;
padding:5px;
border:1px solid #ccc;
background:-webkit-linear-gradient(left, blue, red);/* Safari, Chrome*/
background:-moz-linear-gradient(left, blue, red);/* Firefox*/
background:-o-linear-gradient(left, blue, red);/* Opera, Opera mobile*/
}

3、線性漸變（加入stop() 函式）

div{
width:400px;
height:100px;
padding:5px;
border:1px solid #ccc;
background:-webkit-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,
 #1a82f7 85%, red);/* Safari, Chrome*/

background:-moz-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,
#1a82f7 85%, red);/* Firefox*/

background:-o-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,
#1a82f7 85%, red);/* Opera, Opera mobile*/
}

上面程式碼的意思指：從左到15%處，再到50%處，再到85%處，再到右邊，顏色依次為從blue到#1a82f7， #2F2727, #1a82f7再到red，依次漸變顯示。當然中間的50%是可以省略的，不過不建議省略，直接用上百分比位置，看起來也比較清楚。

總結一下：線性漸變前面第一個引數如left，即意思為從left——right漸變，如果為top，即意思為從top——bottom漸變。如果引數為“top left”，即意思從top left—— bottom right漸變。

第二個引數為漸變開始的第一個顏色，依次為其它漸變色，最後一個顏色即為最後的漸變色。那中間的漸變色，還有另一個位置引數，如 #1a82f7 15%即為從上一個顏色處到15%處，依次漸變為 #1a82f7。

那肯定有人會問了，如果我中間的漸變色不加位置引數呢？那也簡單，位置均分漸變，即(left, blue, #1a82f7 , #2F2727 , #1a82f7 , red) == (left, blue, #1a82f7 25%, #2F2727 50%, #1a82f7 75%, red)。

4、徑向漸變（從圓心到外面）

div{
width:200px;
height:200px;
padding:5px;
border:1px solid #ccc;
background:-webkit-radial-gradient(circle, blue, red);/* Safari, Chrome*/
background:-moz-radial-gradient(circle, blue, red);/* Firefox*/
}

徑向漸變，從圓心向處圍漸變，顏色從blue漸變為red。當然，如果引數circle替換為ellipse,則為橢圓形的徑向漸變。

5、徑向漸變（任意）

關於徑向漸變（任意）情況比較複雜，具體需要參考CSS 3手冊。

<radial-gradient>：radial-gradient([ <position>,]? [ [ <shape> || <size> ] | <shape-size>{2},]? <color-stop>[, <color-stop>]+);

線上生成漸變效果工具 Update（09-39）

Ultimate CSS Gradient Generator 是一款線上生成CSS 漸變效果的工具，不過只支援線性漸變。整個操作就像是Photoshop 的調色，不過在右邊可以即時生成相容所有瀏覽器的CSS 程式碼。