線性漸變

linear-gradient(direction, color-stop1, color-stop2, ...);

帶相容寫法

這兩個是效果一樣的
background: linear-gradient(to bottom, #51098A 0%, #ffffff 100%); 
background: -webkit-linear-gradient(top, #51098A 0%, #ffffff 100%); 　

新增角度

linear-gradient(angle, color-stop1, color-stop2);

定義一個角度，而不用預定義方向（to bottom、to top、to right、to left、to bottom right，等等）

https://www.runoob.com/css3/css3-gradients.html（菜鳥教程）

重複漸變

 background: repeating-linear-gradient(#51098A, #ffffff 10%, #51098A 20%);

效果：

徑向漸變

radial-gradient(shape size at position, start-color, ..., last-color);

一個徑向漸變，必須至少定義兩種顏色節點。可以指定漸變的中心、形狀（圓形或橢圓形）、大小。預設中心是 center（中心點），預設形狀是 ellipse（橢圓形），預設漸變大小

形狀：

radial-gradient(circle, red, yellow, green);
它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。預設值是 ellipse

重複漸變

repeating-radial-gradient(red, yellow 10%, green 15%);

　css

 background-color: red; /* 瀏覽器不支援的時候顯示 */
    background-image: radial-gradient(red 5%, green 15%, blue 60%); /* 標準的語法（必須放在最後） */　

　　效果