一個 CSS 線性漸層，是由一個以角度表示的方向、三個六位數的十六進位色碼，以及必須依照遞增順序排列的百分比色標所定義的。要把一個線性漸層從 Figma 搬進 CSS，您需要從 Figma 的填色面板中，讀出角度、三個十六進位色碼，以及每一個色標的位置，接著把這些確切的輸入值，輸入到 CSS 漸層產生器 中，讓預覽與複製出來的宣告保持同步。這個產生器，會驗證角度是否介於 0 到 360 之間、把每個顏色正規化成六位數十六進位，並且拒絕遞減的色標，而不是默默重新排列它們，因此您貼進樣式表的 CSS，會忠實反映您記錄下來的設計意圖。因為這個預覽，用的正是被複製出來的那個確切 linear-gradient 值，所見即所得，而同一份真相來源，在這段宣告進入正式環境之後，仍然容易稽核。從 0、50 與 100 百分比的色標開始，依照目標區塊的長寬比調整角度，再移動中間的色標，控制漸變最劇烈的位置。
從 Figma 讀取線性漸層的數值
Figma 把一個線性漸層，儲存成一個角度加上一份色標清單。每一個色標，都帶有一個十六進位色碼，以及一個介於 0 到 100 百分比之間的位置。讀出這些輸入值，是把漸層從設計檔案搬出來的前半段工作，而這些數值，能乾淨俐落地對應到 CSS 漸層產生器所需的四項輸入。
- 選取帶有線性漸層填色的圖層。
- 開啟填色面板，確認類型是線性漸層。
- 記下漸層條旁邊顯示的角度（以度為單位）。
- 點擊漸層條上的每一個色標，並從顏色選擇器中複製十六進位色碼。
- 記下每個色標的位置百分比，Figma 會把它顯示在色標控點旁邊。
在 Figma 中，角度 0 指向畫框頂端，90 指向右邊，180 指向下方，270 指向左邊，中間的角度則會產生對角線。CSS 規格採用同樣的慣例，因此您在 Figma 中讀到的角度，可以直接輸入，不需要換算。Figma 的色標，是以 0 到 100 的數值顯示的，這與 CSS 的百分比色標一致，因此這裡同樣不需要縮放。如果其他地方的設計採用不同的慣例，請先查看 CSS 規格中對 線性漸層 的定義，再調整數值。
設定 CSS 漸層產生器
CSS 漸層產生器，接受一個角度、三個六位數十六進位色碼，以及三個百分比色標。一旦這些輸入值，與 Figma 圖層相符，預覽與複製出來的宣告，就保證會一致，因為兩者，都是從同一個序列化的值產生出來的。
- 設定 0 到 360 度之間的角度，使用 Figma 填色面板中顯示的數值。
- 選擇第一個顏色，以六位數十六進位值表示，例如 #2563EB。
- 選擇第二個顏色，以六位數十六進位值表示。
- 選擇第三個顏色，以六位數十六進位值表示。
- 把第一個色標放在 0 百分比的位置。
- 把第二個色標，放在第一個色標的位置或之後，介於 0 到 100 百分比之間（含頭尾）。
- 把第三個色標，放在第二個色標的位置或之後，且不超過 100 百分比。
- 查看預覽，確認漸層與 Figma 圖層相符。
- 複製這段宣告，並貼進目標樣式表中。
如果色標輸入的順序不對，這個產生器會拒絕這項輸入，而不是重新排列數值，這樣一來，設計意圖，就會清楚呈現在控制項中。允許相鄰的色標數值相等，這會在那個邊界上，讓兩個顏色之間產生一個生硬的轉換，對於做出色帶效果很有用。
線性漸層語法如何組成
這段宣告的形式是 background: linear-gradient(angledeg, color1 stop1%, color2 stop2%, color3 stop3%);
一個 CSS 線性漸層，是瀏覽器產生出來的一張圖片。第一個引數，設定漸層線的方向；其餘的引數，則沿著這條線設定不同位置上的顏色。角度使用 CSS 的度數，其中 0 指向上方，90 指向右邊，180 指向下方，270 指向左邊，而 360 則被接受為與 0 相等的邊界值。中間的數值，會產生對角線，而看起來的對角線角度，取決於漸層框的尺寸，這也是為什麼同樣的角度，在另一個元素上看起來會不一樣。
色標，會把每個選定的顏色，固定在漸層線上的一個位置。這個產生器，使用百分比位置，並要求它們依照遞增順序排列。百分比維持在 0 到 100 之間，涵蓋漸層線可見的部分。CSS 可以表示這個範圍之外的色標，但這種進階行為，被刻意排除在這組聚焦的控制項之外。每一個顏色，都會被正規化成一個六位數的十六進位值，因此控制項與最終的宣告，在格式上絕不會有分歧。
基本角度方向
| CSS 度數 | 方向 | 典型用途 |
|---|---|---|
| 0 | 向上 | 由下往上的垂直漸變 |
| 90 | 向右 | 由左往右的水平漸變 |
| 180 | 向下 | 由上往下的垂直漸變 |
| 270 | 向左 | 由右往左的水平漸變 |
| 45 | 右上對角線 | 橫幅標題、主視覺區塊 |
| 135 | 右下對角線 | 卡片強調色、按鈕背景 |
這張表格，列出了 CSS 規格所定義的四個基本方向，加上兩個常見的對角線。在一個非正方形的元素上，看起來的對角線角度，取決於漸層框的尺寸，因此請務必在實際的元件上測試結果，而不是在一個正方形的預覽上測試。
在真實內容中測試漸層
這個預覽，會完全依照瀏覽器實際渲染的方式，顯示這個漸層，但一個單獨看起來還不錯的漸層，一旦有真實內容疊在上面，就可能出問題。放在漸層上方的文字，可能在某一點通過對比度檢查，卻在另一點失敗。請測試整個文字區域，而不是單一個取樣的顏色。CSS 漸層產生器，不會替您計算對比度，因此對比度檢查，必須在實際的樣式表中，針對實際的內容進行。
強烈的多色背景，可能會分散對控制項的注意力，並降低層次感。如果某個區段需要容納密集的內容，請考慮改用低調的雙色版本、覆蓋層，或純色的後備方案。避免只靠顏色來傳達狀態，並在上線之前，確認各種主題、強制配色模式、列印，以及螢幕截圖的呈現效果。
這段宣告，使用 background 這個簡寫屬性，方便複製。如果既有的元件，還需要用到 background-color、圖片圖層、位置或尺寸，請謹慎地整合這個漸層，或改用 background-image，讓這個簡寫屬性，不會重設其他 background 子屬性。多個漸層，可以用逗號疊加，但這個產生器，一次只產生一個線性圖層。它刻意省略了放射狀、圓錐狀、重複、透明度 alpha，以及內插色彩空間等控制項，以保持輸出結果的可讀性與可測試性。
在不破壞漸層的前提下調整它
一個穩定的基準，是把色標放在 0、50 與 100 百分比的位置。設定好這些位置之後，有三件事，可以輕鬆調整，而不需要重新推導整個漸層。
- 移動中間的色標，可以改變漸變最劇烈的位置。中間的色標，如果靠近 0 或 100，會把第二個顏色推向其中一側；中間的色標，如果在 50，則會讓兩個外側顏色之間的漸變，平均分布。
- 改變角度，可以配合元件的長寬比。在正方形區塊上的對角線，在寬形或高形區塊上，會變成一條較平緩或較陡的對角線，因為漸層線，是依照漸層框的尺寸來計算的。
- 一次只換一個顏色，讓另外兩個色標維持不動。這樣一來，在這段宣告進入樣式表之後，轉換的結構，仍然保持可稽核。
瀏覽器，是在它預設的色彩空間中處理顏色內插的，這可能會讓中間點，與 Figma 的預覽相比，稍微有些偏移。這個產生器，不會在自訂的色彩空間中做內插。如果品牌色彩的精確度，或感知上的均勻性非常重要，請在這個專案實際的瀏覽器支援與色彩需求下，測試輸出結果。
以 Figma 作為參考來源
當 Figma 的漸層包含超過三個色標時，請挑出定義主要顏色變化的三個，並把其餘的當成之後再納入的強調色。從漸層條讀出的 Figma 色標，本來就已經使用 0 到 100 的位置，因此輸入到產生器中的值，不需要縮放。想要逐圖層說明如何從 Figma 讀出角度與色標數值，Figma 線性漸層指南 這篇文章，對同樣的控制項有更詳細的說明。
所有作業，都在目前的分頁中於本機執行。數值不會被上傳或儲存，不需要帳號，也不會新增任何相依套件。一旦角度、三個十六進位色碼，以及依序排列的色標，都與從 Figma 讀出的數值相符，複製出來的 CSS 宣告，就可以直接貼進任何樣式表，並在瀏覽器中渲染出同樣的漸層。
如果您還在權衡選項，不使用 API 建立確定性的 CSS 條紋 對此有詳細說明。