CSS 背景線性漸層筆記

background：linear-gradient(線性漸層)

漸層可能性有多種，可以用css3實現像illustrator裡面的漸層樣式。

• 單色漸層
• 雙色漸層
• 雙色以上漸層，彩虹漸層沒問題

漸層的原理請參考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient() 這篇，裡面有提到線性漸層的構成，經過一番閱讀咀嚼後其實會發現跟illustrator裡面的漸層概念是相同的，若是有使用illustrator的人應該不難理解。

在css語法中線性漸層的基本語法成員(values)有<angle>漸層角度、<side or corner>漸層方向、<linear-color-stop>顏色、<color-hint>色彩分段點，(覺得有些很難翻成很貼切的中文)不過可以透過下圖以拉裡面的漸層控制條理解就很清楚，color-hint很像下圖的在中間的菱形，可以控制漸層的層度整體感。

• <angle>漸層角度：這蠻容易理解的，語法則有deg、grad、rad、turn，可以看這篇了解，似乎沒有一定要用哪個，以自己容易判定為主
• <side or corner>漸層方向：to top/bottom/left/right，或是可以to left top之類的組合，意思很明顯是往左上的方向，下面是原文的說明

The values to top, to bottom, to left, and to right are equivalent to the angles 0deg, 180deg, 270deg, and 90deg respectively. The other values are translated into an angle.

• <linear-color-stop>顏色：色碼可以用hex或是rgba型式，用rgba型式的好處是可以調透明度
• <color-hint>色彩分段點：用來告知色彩在哪個位置開始漸變成另外一個顏色，若沒有設定則是預設值50%

標準語法如下，老實說…看到只有@@這個感覺，還是直接看範例而且是帶有效果結果的範例最快，果然是視覺系動物

文章裡有提供了很多範例，我自己整理了一下幾個自己有懂的，且對自己來說容易運用的

↑ background: linear-gradient(#bdc3c7,#2c3e50);

只有2個顏色的漸層，沒有設定角度或方向

↑ background: linear-gradient(90deg,#bdc3c7(淺灰),#2c3e50(深灰));

設定90度方向的漸層

↑ background: linear-gradient(#C6FFDD,#FBD786,#f7797d);

3個顏色的漸層

↑ background: linear-gradient(45deg,#C6FFDD(綠),#FBD786(黃),#f7797d(紅));

3個顏色漸層+45度的方向

↑ background: linear-gradient(to right top,#C6FFDD,#FBD786,#f7797d);

3個顏色+往右上的方向，可以看出方向跟45度方向雷同，若是不喜歡用角度算漸層方向，這種方式倒是挺好用的，只要左右+上下作組合變換

↑ background: linear-gradient(to right, #654ea3 10%, 30%, #eaafc8 90%);

2個顏色+往右漸層，但這邊多了分段<color-hint>設定，從語法中看到深紫色多了10%的設定值，表示從0%到10%都是#654ea3深紫的範圍，90%~100%則是#eaafc8淺紫的範圍，30%則表示深紫到淺紫的漸層會在30%的地方開始

background: linear-gradient(90deg, #654ea3 10%, #eaafc8 90%);

這是沒有設分段點則分段點預設50%的狀況下，可以看出與上圖明顯的差別

原文裡面有提到這個範例，雖然是3種不同的寫法，但呈現出來的效果是一樣的

以3個顏色試做

background: linear-gradient(90deg, #12c2e9 0%, #c471ed 30%, #c471ed 50%, #f64f59 70%, #f64f59 100%);

background: linear-gradient(90deg, #12c2e9, #c471ed 30% 50%, #f64f59 70%);

background: linear-gradient(90deg, #12c2e9 0%, #c471ed 30% 50%, #f64f59 70% 100%);

再進一步的變形，可以達成以往要用圖片才能達到的效果，現在用css就做得出來了，完全可以把以拉的東西搬進css裡面，作法則是利用背景疊加的概念製造出色彩融合+漸層的假象，前面有提到使用rgba的好處是可以設定透明度，便可以利用這樣的效果達成調色混合的原理。

background:

linear-gradient(140deg, rgba(253,187,45,1) 10%,rgba(253,187,45,0) 70%), linear-gradient(60deg, rgba(34,193,195,1) 10%,rgba(34,193,195,0) 70%), linear-gradient(-30deg, rgba(252,70,101,1) 0%,rgba(252,70,101,0) 70%), linear-gradient(220deg, rgba(29,128,253,1) 0%,rgba(29,128,253,0) 70%);

原文出處 https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient()