線向漸變：linear
background-image: linear-gradient(red,blue,pink)預設自上而下，三種漸變色
background-image: linear-gradient(to right,red,blue,pink)改成自左到右，其他方向同理。倆個方向配                      
                                合斜角開始（例如：to top right表示）自左下到右上
background-image: linear-gradient(60deg,red,blue,pink)角度開始
background-image: linear-gradient(40deg,red 20%,blue 20%,pink 60%)漸變色每種顏色區域大小，
                                畫素px也可以為單位
background: repeating-linear-gradient(60deg,red 10px,blue 30px,pink 100px)重複漸變

徑向漸變：radial
#div1{background: radial-gradient(red,pink,yellow);}預設橢圓
#div2{background: radial-gradient(circle,red,pink,yellow);}圓形
                                 其他方向同理circle at left表示光源在左邊，類似手電筒的效果
 

#div2{background: repeating-radial-gradient(circle 10px,red,pink,yellow);}重複漸變   
 

毒蘑菇配色 - 一個好用的配色網站！ (dumogu.top)