CSS 線性漸層是一種由瀏覽器從一條經過內插的色彩線繪製而成的影像，在背景宣告中使用 linear-gradient() 函式定義。若要製作 CSS 漸層背景，請設定 0 到 360 度之間的角度，挑選三個六位數十六進位色彩，並依 0% 到 100% 的遞增順序為每個色彩加上百分比停駐點。瀏覽器接著會沿著漸層線，在這些停駐點之間渲染出平滑的過渡。因為這個影像是即時產生而非載入的，所以漸層能乾淨地縮放以適應各種螢幕尺寸，且不會產生從點陣背景會看到的鋸齒瑕疵。CSS Gradient Generator 會處理語法、驗證角度、色彩與停駐點順序，並回傳一個可直接貼上的宣告，讓你不必在瀏覽器開發者工具中反覆編輯就能放進任何樣式表。
Inside the Linear Gradient Function
CSS 線性漸層是漸層資料型別的一個值，瀏覽器會將它解析成繪製伺服器影像，而不是可供下載的資源。根據 W3C CSS Images Level 3 規範，linear-gradient() 的第一個參數定義漸層線的方向，其餘參數則定義沿著該漸層線上各位置的色彩。這讓漸層成為兩個要素的函式:角度與色彩停駐點清單。沒有獨立的點陣步驟、沒有影像檔，也不會發出 HTTP 請求。你只需在 background 或 background-image 宣告中撰寫這個函式，瀏覽器就會依需求繪製過渡效果。
漸層線錨定在漸層方框上，預設即元素的內距方框。當你變更元素的寬度或高度時，漸層線會跟著拉伸，你指定的角度會依新的尺寸重新解釋。這就是為什麼同一個漸層在寬幅橫幅上看起來是水平的，而在細長側邊欄上看起來會明顯斜的原因。CSS Gradient Generator 會根據你的輸入產生宣告，且預覽和複製的 CSS 使用完全相同的值，因此顯示結果與你貼上的程式碼共享同一個真實來源。
The Inputs the Generator Validates
CSS Gradient Generator 只接受一組嚴格定義的輸入。角度限制為 0 到 360 之間的整數，其中 360 被視為等同於 0 的邊界值。每個色彩都必須是六位數十六進位值(例如 #1a2b3c)，並標準化為該格式，以確保產生的宣告沒有歧義。每個停駐點必須是 0 到 100 之間的百分比，且三個停駐點必須嚴格依遞增順序排列。
允許相鄰的停駐點相同，這會在同位置產生兩種色彩的硬邊過渡，在你需要色帶而非混合時相當實用。遞減的停駐點會被明確拒絕，而不是依賴 CSS 的修正演算法，因為在你互動設計時，明確的錯誤訊息較容易閱讀。百分比會保持在可見的漸層線範圍內，因此像是停駐點超出 0–100 範圍這類進階行為，刻意排除在工具的控制項之外。工具所暴露的每個輸入，在序列化之前都會經過驗證，這就是為什麼預覽永遠不會與複製的程式碼產生偏差。
Build the Gradient in Order
CSS Gradient Generator 會引導你依序完成四個步驟。每個步驟都有單一且定義明確的結果，只要輸入通過驗證，你隨時可以停止並複製 CSS。
- Set an angle from 0 through 360 degrees. 使用傳統的指南針方向挑選起始方向:0 代表向上、90 代表向右、180 代表向下、270 代表向左，或介於其中的任何對角值。將 360 視為等同於 0 的邊界值。將元件放到頁面上後再調整角度，因為視覺上的對角方向取決於元素的長寬比。
- Choose three six-digit colors. 挑選起始色彩、中間錨點與結束色彩。將每個色彩輸入為六位數十六進位值(例如 #1a2b3c)。原生色彩輸入讓選擇可預測，且工具會在不明確或不完整的字串進入宣告之前先行拒絕。
- Place the three percentage stops in ascending order. 從標準的 0%、50%、100% 三元組開始，接著將中間停駐點往前或往後移動到非 50% 的位置，以控制混合最強烈變化的位置。相鄰的停駐點相同會產生硬邊過渡;遞減的停駐點會被拒絕，以保持設計意圖的明確性。
- Copy the declaration and test content contrast across the full gradient. 以預覽作為唯一的真實來源，因為它與複製的 CSS 共享完全相同的序列化值。將宣告貼到目標樣式表，以實際尺寸渲染元件，並在表面上的多個位置驗證文字與控制項的對比。
How Angles Map Onto the Gradient Box
在 CSS 中，漸層線的方向由遵循簡單慣例的角度定義。零度指向上方，90 度指向右方，180 度指向下方，270 度指向左方。CSS 規範也接受 360 作為等同於 0 的邊界值，因此 CSS Gradient Generator 將 0–360 的範圍視為一個連續的圓。介於其中的任何值會產生對角線，其視覺方向取決於漸層方框的長寬比。
在方形元素上設定為 45 度的漸層，看起來是真正的角對角對角線。同一個設定為 45 度的漸層，在寬幅橫幅上會看起來較平緩，因為漸層線是依較寬的方框解析的。MDN 漸層參考資料 詳細記載了這個行為，包括 0deg 角度對應 "to top"(向上)漸層、90deg 對應 "to right"(向右)這項事實。當你變更承載背景的元素的尺寸時，請記得重新檢視該值，而不是預期視覺效果會保持不變。
| Angle | Gradient direction | Notes |
|---|---|---|
| 0deg | Points upward | Default "to top" direction |
| 90deg | Points right | Default "to right" direction |
| 180deg | Points downward | Default "to bottom" direction |
| 270deg | Points left | Default "to left" direction |
| 360deg | Boundary, equivalent to 0 | Safely accepted for wrap-around inputs |
Stop Order, Hard Transitions, and Rejection
色彩停駐點是沿著漸層線錨定每個選取色彩的百分比。CSS Gradient Generator 接受介於 0 到 100 之間的三個停駐點，並依從小到大的順序排列。常見的起點是 0%、50%、100%，這會產生均勻的三段式混合，中間色彩作為視覺中點。將中間停駐點往前移到 50% 之前，會把最強烈的混合推向漸層線的開頭;往後移則會把混合推向結尾。
相鄰停駐點相同是一項刻意的功能，而不是錯誤。將兩個停駐點設為相同百分比，會在該錨點兩側的色彩之間產生一條硬邊，這在製作條紋、分隔線與帶狀標題時很實用。遞減的停駐點會被工具拒絕，而不是被默默地重新排序，因為在你反覆調整設計時，明確的錯誤訊息比悄悄修正的宣告更有用。驅動預覽的值就是被序列化的值，因此你所看到的正是瀏覽器將會渲染的結果。
Test Contrast, Fallbacks, and Theming
漸層並非沒有設計風險，而 CSS Gradient Generator 刻意不會為你計算對比。對比可能在表面的某一點通過，在另一點卻失敗，因此請在文字或控制項出現的每個區域進行測試，而不是只取樣單一色彩。強烈的多色背景也可能干擾前景控制項，所以在上線前請考慮使用低調的雙色變體、半透明覆蓋層或純色備案。
避免僅以色彩傳達狀態，並驗證漸層在強制色彩模式、印刷樣式表與螢幕擷圖中的表現。因為漸層取代了裝飾用的點陣影像，所以能在不同裝置間乾淨地縮放，但仍應先定義純色 background-color 備案，讓較舊的瀏覽器或精簡的內容環境有東西可以繪製。這個產生器完全在當前瀏覽器分頁中執行，數值不會被上傳、儲存或綁定帳號，也不會為專案新增任何依賴。
Paste the Declaration Into Existing CSS
CSS Gradient Generator 回傳的宣告使用 background 簡寫，以方便貼上。這個簡寫可能會重設同一元素上其他 background 子屬性，因此若該元件同時需要 background-color、分層的 background-image、background-position 或 background-size，請謹慎整合漸層。將宣告切換為 background-image 可讓漸層與其他背景堆疊保持隔離，在為既有規則加入漸層時，通常是較安全的選擇。
多個漸層可以透過逗號分隔來堆疊，但產生器每次宣告只會產生一個線性圖層。若你需要堆疊漸層，請分別建立每一個，再手動合併其值。漸層就定位後，請務必在測試實際內容、回應式尺寸、整個表面的對比，以及你所支援環境所需的備案之後，再複製 CSS。
如需更深入的了解，請參閱 CSS Grid Generator Bulk: Skip Repetitive Track Lists。
如需更深入的了解，請參閱 CSS Loader Generator: Command Line vs Online Workflow。