1 background:linear-gradient(direction, color-stop1, color-stop2, ...); 
1. direction
漸變的方向或角度，如果沒有設定，預設會是由上至下進行漸層；若是設定角度，則是以左下角為圓心，與正 y 軸的夾角作為角度的來設定。這細節我們等等來實驗會比較清楚。
2. color-stop
它會依照依方向使用 color 1 → color 2 → … 依序漸變過去。在 color 後方會僅跟著定位參數，將每個顏色放置在漸層線上的特定位置。若沒有指定定位參數，則預設為將第一個顏色放置在 0%、最後一個顏色放置在 100%，其餘顏色則會自動等比例分配。其中 0% 表示起始邊界，100% 表示結束邊界。

### 用關鍵字設置漸變方向

 1234 background: linear-gradient(to top, #c5d5fa, #c3dc99); background: linear-gradient(to bottom, #c5d5fa, #c3dc99); background: linear-gradient(to left, #c5d5fa, #c3dc99); background: linear-gradient(to right, #c5d5fa, #c3dc99);; 

 1234 background: linear-gradient(to top left, #c5d5fa, #c3dc99); background: linear-gradient(to bottom left, #c5d5fa, #c3dc99); background: linear-gradient(to top right, #c5d5fa, #c3dc99); background: linear-gradient(to bottom right , #c5d5fa, #c3dc99); 

### 用度數設置漸變方向

 12345 background: linear-gradient(0deg, #c5d5fa, #c3dc99); background: linear-gradient(30deg, #c5d5fa, #c3dc99); background: linear-gradient(45deg, #c5d5fa, #c3dc99); background: linear-gradient(60deg, #c5d5fa, #c3dc99); background: linear-gradient(90deg, #c5d5fa, #c3dc99); 

### 多種顏色漸層

 1 background: linear-gradient(#c5d5fa, #fcdef4, #c3dc99); 

 1 background: linear-gradient(#c5d5fa 0%, #fcdef4 15%, #c3dc99 100%); 

 12 background: linear-gradient(red, orange, yellow, green, blue, indigo, purple); 

 1234567 background: linear-gradient(red 0%, red 15%, orange 15%, orange 30%, yellow 30%, yellow 45%, green 45%, green 60%, blue 60%, blue 75%, indigo 75%, indigo 90%, purple 90%, purple 100%); 

 1 background: linear-gradient(#c5d5fa 50% ,#c3dc99 50%); 

Box and Zig-Zag Background Patterns（範例來源: Quackitn卡斯伯 BlogMediumCSS-Tricks

 123456 background: linear-gradient(135deg, #ccc 25%, transparent 25%) -50px 0, linear-gradient(225deg, #eee 25%, transparent 25%) -50px 0, linear-gradient(315deg, #ccc 25%, transparent 25%), linear-gradient(45deg, #eee 25%, transparent 25%); background-size: 100px 100px; 

 1 background: radial-gradient(shape size at position, color-stop1, color-stop2, ...); 
1. shape size at position
其實這邊有三個參數 shape、size 與 position。
• shape
指的是向外放射延伸的形狀，預設是橢圓（ellipse），另一個選項則是圓形（circle）。
• size
指的是橢圓/圓形的半徑，預設是以圓心到最遠角（farthest-corner） 為半徑進行漸變，其餘的值有最近邊（closest-side）、最近角（closest-corner）、最遠邊（farthest-side）。這邊一樣等等來做實驗。
• position
預設會將圓心設在中心點（center）。
2. color-stop
跟線性漸層一樣，有顏色與定位參數兩個參數，寫在前的顏色越接近圓心。

### 設置放射延伸形狀

 12 background: radial-gradient(circle, #c5d5fa, #c3dc99); background: radial-gradient(ellipse, #c5d5fa, #c3dc99); 

 12 background: radial-gradient(circle, #c5d5fa 25%, #c3dc99); background: radial-gradient(circle, #c5d5fa 70%, #c3dc99); 

### 設置放射中心

1. 絕對位置：直接使用長度值來定義位置（如：10px）
2. 百分比值：使用百分比（例：10%）來定義位置
3. 關鍵字：使用 top、 bottom、 left、 right、 center 關鍵字來指明位置，也可將關鍵字使用，就是前面提到的 top left、 top right…等。

 1234 background: radial-gradient(circle, #c5d5fa, #c3dc99); background: radial-gradient(circle at 30px 50px, #c5d5fa, #c3dc99); background: radial-gradient(circle at 80% 20%, #c5d5fa, #c3dc99); background: radial-gradient(circle at left bottom, #c5d5fa, #c3dc99); 

### 設置放射半徑

 1234 background:radial-gradient(circle closest-side at center, #c5d5fa, #c3dc99); background:radial-gradient(circle farthest-side at center, #c5d5fa, #c3dc99); background:radial-gradient(circle closest-corner at left, #c5d5fa, #c3dc99); background:radial-gradient(circle farthest-corner at left, #c5d5fa, #c3dc99); 

### 多種顏色漸層

 12 background:radial-gradient(circle, red, orange, yellow, green, blue, indigo, purple); 

 12345678 background:radial-gradient(circle, red 0%, red 15%, orange 15%, orange 30%, yellow 30%, yellow 45%, green 45%, green 60%, blue 60%, blue 75%, indigo 75%, indigo 90%, purple 90%, purple 100%); 

oxxo 還能畫出個球體：

 123456 background-color: orange; background-image: radial-gradient(gold 15%, transparent 15%), radial-gradient(gold 40%, transparent 40%); background-size: 60px 60px; background-position: 0 0, 30px 30px; 

 12 background-image: conic-gradient(from angle at position, color-stop1, color-stop2, ...); 
1. from angle
開始旋轉的角度，預設是從 0 度 開始順時鐘漸變。
2. at position
錐形漸層的圓心，預設圓心是在圖片中心。

 12 background: conic-gradient(#c5d5fa, #fcdef4, #c3dc99); background: radial-gradient(circle, #c5d5fa, #fcdef4, #c3dc99); 

### 設置起始旋轉的角度

 1234 background: conic-gradient(from 0deg, #c5d5fa, #fcdef4, #c3dc99); background: conic-gradient(from 90deg, #c5d5fa, #fcdef4, #c3dc99); background: conic-gradient(from 180deg, #c5d5fa, #fcdef4, #c3dc99); background: conic-gradient(from 270deg, #c5d5fa, #fcdef4, #c3dc99); 

### 設置錐形的圓心

 1234 background: conic-gradient(#c5d5fa, #fcdef4, #c3dc99); background: conic-gradient(at 30px 50px, #c5d5fa, #fcdef4, #c3dc99); background: conic-gradient(at 80% 20%, #c5d5fa, #fcdef4, #c3dc99); background: conic-gradient(at left bottom, #c5d5fa, #fcdef4, #c3dc99); 

### 多種顏色漸層

 123456789101112 width:200px; height:200px; border-radius:50%; background: conic-gradient(red, orange, yellow, green, blue, indigo, purple, red); background: conic-gradient(red 0, red 25deg, orange 25deg, orange 75deg , yellow 75deg, yellow 125deg, green 125deg, green 175deg, blue 175deg, blue 225deg, indigo 225deg, indigo 275deg, purple 275deg, purple 325deg, red 325deg, red 360deg); 

 1 background:repeating-linear-gradient(direction, color-stop1, color-stop2, ...); 

 1 background:repeating-linear-gradient(#c5d5fa, #c3dc99 15%); 

 1 background:repeating-linear-gradient(#c5d5fa, #c3dc99 15%, #c5d5fa 30%); 

 123 background: repeating-linear-gradient(45deg, black 0, black 5%, orange 5%, orange 10%); 

 1 background:repeating-radial-gradient(direction, color-stop1, color-stop2, ...); 

 1 background: repeating-radial-gradient(circle, #c5d5fa 5%, #c3dc99 10%); 

 12 background: repeating-radial-gradient(closest-side at 25px 35px, orange 15%, gold 40%); background-size:60px 60px; 

 1 background: repeating-conic-gradient(from angle at position, color-stop1, color-stop2, ...); 

 12 background: repeating-conic-gradient(red 0, yellow 15deg); background: repeating-conic-gradient(red 0, red 15deg, yellow 15deg, yellow 30deg); 

 12 border:7px solid #000; background: repeating-conic-gradient(black 0% 25%, white 0% 50%) 43%/45px 50px; 

## Combine background image with gradient overlay

 123 background-image: linear-gradient(to bottom, rgba(195, 220, 153, 0.32), rgba(255, 255, 255, 0.73) 80%), url('https://i.imgur.com/OzTiFeI.png'); 

## 參考資料

1. 卡斯伯 (2013-09-24)。CSS沒有極限 - CSS3的漸層。檢自 卡斯伯 Blog (2022-12-22)。
2. oxxo (2022-08-30)。深入理解 CSS 漸層 ( CSS Gradient ) 。檢自 OXXO.STUDIO (2022-12-22)。
3. 小艾 (2018-01-14)。Day26：小事之 多重背景與漸層背景 CSS3 Gradients。檢自 iT 邦幫忙 (2022-12-22)。
4. bdp (2017-12-07)。CSS：background 雙色漸層。檢自 iT 邦幫忙 (2022-12-22)。
5. 逗點人 (2017-10-27)。三種絕美CSS 背景漸層語法產生器(FRESH BACKGROUND GRADIENTS）-適用FIREFOX、IE。檢自 逗點人7netic設計插畫誌 (2022-12-22)。
6. CSS linear-gradient() Function。檢自 Quackit (2022-12-22)。
8. Lena Stanley (2021-05-15)。CSS Conic-Gradient。檢自 Lena Design (2022-12-22)。
9. Ana Tudor (May 28, 2020-05-28)。Background Patterns, Simplified by Conic Gradients。檢自 CSS-Tricks (2022-12-26)。
10. (2021-06-16)。How to add a gradient overlay to a background image using just CSS and HTML。檢自 Web dev etc (2022-12-26)。
11. 沾醬油(2018-04-19)。色票-好用的9個漸層配色網站。檢自 沾醬油的部落格｜痞客邦 (2022-12-26)。

## 更新紀錄

• 2023-02-15 發布
• 2022-12-26 完稿
• 2022-12-22 起稿