CSS 線性漸變宣告會沿著一條直線混合三種顏色,其方向由 0 到 360 度的角度設定,每個顏色都錨定在漸變線上明確的百分比停駐點。當該宣告貼到 Figma 的填色面板時,選定的圖層會套用精確的角度、三組六位數十六進位顏色,以及排序過的停駐點,因此預覽圖格顯示的內容,就是 Figma 在畫布上呈現的結果。CSS 漸變產生器會在序列化單一 background 簡寫之前,驗證每個輸入值——角度、三組十六進位顏色,以及遞增的百分比停駐點——因此預覽與複製的宣告共用同一個真實來源。這種緊密的耦合,正是設計師在建構 Figma 檔案與正式樣式表之間像素級精確一致性時,通常會先在 CSS 中建構漸變,再將驗證過的字串帶入畫布的原因。這也表示整個工作流程是以貼上為核心,而不是以手動輸入為核心。
Figma 內建的漸變編輯器在探索時很方便,但其控制項很快就會出現飄移:在畫布上拖曳停駐點可能會以難以事後稽核的方式,移動中間顏色的位置,而且沒有辦法將角度、顏色與停駐點鎖定成可轉移、可複製的形式。需要 Figma 檔案與樣式表之間精確一致性的設計師,通常會反過來作業——他們先在 CSS 中建構漸變,然後將宣告貼入 Figma,讓畫布與程式碼保持同步。
Figma 中的線性漸變——CSS 在其中的角色
Figma 會將 CSS 線性漸變字串解析為有效的填色輸入,這讓經過驗證的宣告可以直接移植到畫框、矩形或元件中。套用的流程很短且明確:
- 在 Figma 畫布上選取應該接收漸變的圖層。
- 在右側的「屬性」面板中,開啟「填色」區段,然後點擊作用中的顏色色票以開啟顏色選擇器。
- 將顏色選擇器切換到接受原始 CSS 字串的模式(Figma 透過顏色輸入框的文字欄位或專屬的 CSS 輸入項目來提供此功能)。
- 將複製的 background: linear-gradient(...); 宣告貼到該欄位中並確認。
- 調整圖層尺寸以符合該角度所設計的漸變框,因為對角線的視覺效果會隨著長寬比而改變。
宣告就位後,Figma 會讀取角度、三組十六進位值與百分比停駐點,並呈現與預覽中相同的漸變。接著可以將該填色轉換為 Figma 原生的漸變停駐點以進行進一步的視覺編輯,或保留為原始 CSS 字串以維持與樣式表的一致性。
為什麼要先在 CSS 中建構漸變
CSS 漸變產生器執行了三項 Figma 原生編輯器沒有的工作。它會一次性驗證輸入:0–360 度的角度、三組六位數十六進位值,以及依遞增順序排列的百分比停駐點,任何規則被違反時都會以可見的訊息拒絕。它提供單一真實來源:預覽圖格與複製的宣告由同一個序列化字串產生,因此所見即樣式表所接收的內容。它讓宣告保持可稽核:每個停駐點都是明確的,且允許相鄰停駐點相等,以產生硬性的轉場,這使得硬邊界在程式碼審查中一目了然。
這一切都不需要上傳設計或登入。這些數值從未離開當前的瀏覽器分頁,這使得對即時樣式表進行反覆迭代、複製結果,然後直接貼到 Figma 中,而不必擔心畫布與程式碼之間出現飄移,變得切實可行。這種取捨是有意為之:此工具會產生一個具有三個停駐點的線性圖層,並省略放射、圓錐、重複、alpha 與內插空間控制項,讓輸出保持易讀且可測試。
四個步驟建構漸變
- 設定 0 到 360 度之間的角度。0 用於向上的漸變,90 用於向右,180 用於向下,270 用於向左;360 會被視為等同於 0 的邊界值而予以接受。
- 選擇三組六位數十六進位顏色,例如 #0F172A、#6366F1 與 #F472B6。原生的顏色輸入讓選取保持可預測,且驗證會在不完整或含糊的字串到達宣告之前將其拒絕。
- 將三個百分比停駐點依遞增順序排列,例如 0%、50% 與 100%。相鄰的相等值會產生硬性轉場;遞減的值會被拒絕,以確保設計意圖保持明確。
- 複製宣告,並在貼到 Figma 之前,測試整個漸變面上的內容對比度,而非僅在單一取樣點測試。
對於典型的英雄橫幅,一個有用的起始設定是 135 度對角線,並在 0%、50% 與 100% 處設置停駐點。這會讓混合沿著漸變線均勻展開,並為中間停駐點提供移動空間,而不會讓轉場塌陷。一旦預覽顯示正確,複製的宣告就準備好可以貼上了。
解讀 CSS 角度與對角線偏移的原因
CSS 漸變角度遵循固定的羅盤,在 W3C CSS Images Level 3 規範 中定義。零度指向漸變框的頂端,90 度指向右,180 度指向下,270 度指向左。360 度的值會被視為等同於零的邊界值。中間角度會產生對角線,但對角線的視覺斜率取決於漸變框的尺寸,因為該角度是相對於框而非視口來解析的。
| 角度(度) | 方向 | 典型用途 |
|---|---|---|
| 0 | 由下而上 | 細微的高光疊加層、上升式背景 |
| 90 | 由左而右 | 水平橫幅、進度條式填色 |
| 180 | 由上而下 | 預設頁面背景、垂直暈染 |
| 270 | 由右而左 | 鏡像英雄區塊、淡入強調 |
| 135 | 由左上至右下 | 對角橫幅、動態封面 |
| 45 | 由左下至右上 | 光源效果、對角分割面板 |
這就是為什麼同一個角度在 1920×600 的橫幅上看起來正確,但在 600×600 的正方形上看起來卻不對。漸變線是相對於元素自身的框來計算的,因此對角線會拉伸或壓縮以符合新的長寬比。當漸變要置於一個會為了不同斷點而調整大小的 Figma 畫框內時,該角度應該在正式寬度、正式高度,以及任何受限制的行動裝置尺寸下測試,而非僅以單一尺寸定案。
顏色停駐點、相等,以及「遞增」的意義
顏色停駐點是選定顏色沿著漸變線錨定的位置。CSS 漸變產生器僅使用百分比位置,所有三個停駐點都必須落在 0 到 100 之間,並依遞增順序出現。以 0%、50% 與 100% 作為起始設定,會將第一個顏色置於線的起點,中間顏色精確置於中央,第三個顏色置於末端。將中間停駐點向任一邊緣移動,會把混合最強的部分推向該邊緣;將其往 50% 移動則會平衡轉場。
相鄰的相等停駐點是有意被允許的。兩個位於相同百分比但顏色不同的停駐點,會產生硬性轉場——一條可見的接縫——而非平滑的混合。這對於條紋效果、雙色面板或需要銳利邊界的條紋構圖很有用。另一方面,遞減的停駐點會被產生器拒絕,而不是被瀏覽器的 CSS 修正演算法靜默修正。這個錯誤會被顯露出來,因為明確的訊息比瀏覽器悄悄改寫的值更容易除錯。
每個顏色在序列化之前都會被正規化為六位數的十六進位字串,因此宣告中不含簡寫形式、不含 rgb() 呼叫,也不含具名顏色。這讓 CSS 易於閱讀,並在宣告移入共用樣式表或與 Figma 檔案一同審查時,易於稽核。
對比度、後備方案與構圖風險
漸變就是一張圖,而該圖的每個部分對於疊加在其上的任何文字或控制項,都有自己的對比度。一個標題在漸變最亮處通過 WCAG 對比度檢查,在最暗處可能會失敗;而一個位於中間停駐點的按鈕,在較小的螢幕上可能會落在不同的比率上。產生器不會計算對比度,因此必須在整個面上——也就是所有要出現文字或互動元素的區域——測試對比度,然後漸變才能出貨。MDN 漸變資料類型參考是確認瀏覽器特定行為的好地方,當同一個宣告必須在較舊的引擎中呈現時尤其有用。
強烈的多色背景也會與前景內容競爭。當漸變的目的是襯托於一個繁忙的介面後方時,較細緻的雙色變體、低透明度的疊加層或實色後備方案,通常比鮮豔的三色混合更易閱讀。狀態絕不應僅透過顏色傳達,而主題、強制色彩模式、列印與螢幕擷取畫面,各自都可能改變漸變在實際產品中的呈現方式。審查 Figma 檔案的設計師也應在實際畫框尺寸下匯出漸變,以確認所感知的中點與瀏覽器的呈現一致。
最後,產生器會將宣告輸出為 background 簡寫。若現有元件已設定 background color、background image、position 或 size,該簡寫將重設這些子屬性。在這種情況下,請將貼上的值從 background 切換為 background-image,讓漸變能整齊地疊加,而不打擾其餘的背景堆疊。
將宣告貼入 Figma 並稽核結果
一旦設定好四個輸入值——角度、三組十六進位顏色、遞增的停駐點——產生器會回傳一行 background: linear-gradient(...);。將該行貼入 Figma 的填色輸入,確認圖層尺寸符合該角度所調整的漸變框,並目視檢查畫布是否與預覽圖格一致。若團隊中的設計師需要在 Figma 原生的漸變編輯器中繼續編輯,此時請將填色轉換為 Figma 的本地停駐點表示。若設計必須與樣式表保持完全同步,則將填色保留為原始 CSS 字串,如此未來任何程式碼變更都能在不重新挑選顏色或重新量測停駐點的情況下,鏡像反映回 Figma。
對於分層或重複的漸變,產生器的範圍刻意保持精簡:它產生一個具有三個停駐點的線性圖層。一旦基底值進入樣式表,額外的漸變可以用逗號堆疊,而像 用於條紋圖案的 repeating-linear-gradient 等相關技術,可以在不離開 CSS 規範的情況下延伸結果。其界線在 Figma 中與在瀏覽器中相同:漸變就是一張圖,該圖有尺寸,而尺寸決定每個角度呈現的樣貌。
如需更深入的探討,請參閱 如何在 Unix 中建立精確位元組的虛擬檔案。