<gradient> = [ <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient> ]

<linear-gradient> = linear-gradient(  [ [ <angle> | to <side-or-corner> ] ,]?   <color-stop>[, <color-stop>]+ )  <side-or-corner> = [left | right] || [top | bottom]

這里顏色值也可以分好多段，如1-2

background-image: linear-gradient(top, #eff6fb, #d3e4f3 68%);

1-2：

background-image: linear-gradient( left, #FF0000, #FFA500 13.0%,#FFFF00 26.0%,#0000FF 39.0%,#008000 52.0%,#4B0082 65.0%,#EE82EE 78.0%);

background-image: linear-gradient(top left, #eff6fb 10%, #d3e4f3 68%);

1-4：漸變方向也可以指定角度。

background-image: linear-gradient(0deg, #eff6fb 10%, #d3e4f3 68%);

0deg漸變開始在左側，90deg的底部，180deg在右側，270deg在頂部。因此，我們可以認為角度作為反??時針順序。
如:

1-5：透明度(Transparency)：還支持透明漸變。這是相當有用的，例如，當堆疊多個背景時。這里是兩個背景的結合：一張圖片，一個白色到透明的線性漸變。

二：徑向漸變

<radial-gradient> = radial-gradient(   [ [ <shape> || <size> ] [ at <position> ]? , |     at <position>,    ]?   <color-stop> [ , <color-stop> ]+ )

background: -moz-radial-gradient(red, yellow, #1E90FF);

效果如圖：

2-2：指定位置顏色的漸變：

background: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 50%);

?效果如果：

?2.形狀
2-3：起始位置一樣，形狀不一樣。

 .repeating_radial_gradient_example {    background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px); } .repeating_linear_gradient_example {   background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px); }