為什麼漸層網格會變成一個維護問題
Illustrator、Photoshop 或 Figma 中的漸層網格,能讓設計師做出平滑的多點色彩混合,但這件作品一離開設計工具,就會變成一項維護負擔。這個檔案通常會匯出成點陣圖或 SVG,原始色彩存放在一個不透明的二進位檔或向量素材裡,而每一次變動——不論是品牌改版、hover 狀態、深色模式,還是新的中斷點——都意味著要重新開啟原始專案並重新匯出。
網頁開發者在匯出過程中,也會失去一些實用能力。背景無法透過自訂屬性套用主題、元素無法因應元件狀態而調整,而任何響應式縮放都有模糊、色帶或重新壓縮瑕疵的風險。即使是刻意壓縮過的 PNG,也會在設計鎖定之外,再加上一次網路請求與一筆繪製成本。
CSS 目前還沒有廣泛支援的網格漸層函式,但在單一底色上疊四層放射狀漸層,就能重現設計工具所稱「漸層網格」那種常見的四角色塊外觀。得到的結果是純粹的 CSS,會隨著元素縮放,而且可以直接在程式碼中編輯。
疊層 CSS 放射狀漸層如何取代漸層網格
這個做法是一疊按繪製順序排列的四層 background-image,每個顏色對應一個 radial-gradient(circle at x y, color, transparent X%),依序列在 background-image 宣告中,因此第一層會繪製在最上面。第五個宣告 background-color,則填滿漸層未涵蓋到的區域,做為可預期的備援色。
Mesh Gradient Generator 把四個焦點位置固定在元素的四個角落附近,讓結果在不需要手動調校的情況下,看起來就很平衡:
| 圖層 | 位置(x y) | 角色 |
|---|---|---|
| 1 | 15% 20% | 左上角色塊 |
| 2 | 85% 15% | 右上角色塊 |
| 3 | 20% 85% | 左下角色塊 |
| 4 | 80% 80% | 右下角色塊 |
每一層都是從所選顏色在 0% 處開始,漸變到指定的擴散百分比處變成透明,因此可見的顏色會形成一個色塊島,再逐漸融入底色或相鄰的色塊島。擴散值控制色塊島的大小;數值較小會產生比較緊湊的色點,色點之間留有較多底色;數值較大則會讓色塊島持續變大,直到彼此重疊並融合。
CSS 放射狀疊層做法,與團隊在正式程式碼中,通常用來取代漸層網格的其他常見做法相比如何?
| 做法 | 輸出格式 | 可在程式碼中編輯 | 額外請求 |
|---|---|---|---|
| 疊層 CSS 放射狀漸層 | 僅 CSS | 可以,直接在樣式表中編輯 | 無 |
| 匯出的 PNG 或 WebP | 點陣圖 | 不行,鎖定在二進位檔中 | 一次圖片請求 |
| 匯出的 SVG | 向量標記 | 可以,直接編輯 XML | 一次 SVG 請求 |
| Canvas 或 WebGL 繪製 | 執行期像素 | 由 JavaScript 驅動 | 函式庫體積 |
疊層 CSS 放射狀漸層在可編輯性與網路成本上勝出;點陣匯出在照片式混色的視覺精細度上勝出;當素材必須能縮放又要能編輯、但又無法用 CSS 表達時,SVG 勝出;當漸層網格必須在執行期變化時,canvas 或 WebGL 勝出。對於典型的主視覺區、卡片或區塊背景而言,CSS 疊層做法最容易上線,維護成本也最低。
用 Mesh Gradient Generator 取代漸層網格
Mesh Gradient Generator是一個小型的瀏覽器內工具,提供五個色彩欄位、一個擴散控制項,以及即時的 CSS 預覽。一切都在目前的分頁中進行,因此不會有任何調色盤、預覽畫面或截圖被上傳或儲存,而且預覽畫面呈現的正是實際輸出的宣告內容。
- 選擇四種網格顏色與一個底色。每個顏色都是六位十六進位數值,在產生之前會先驗證,這也是瀏覽器色彩輸入元件所輸出的格式。為四個角落各自挑選你想要的顏色,再選一個底色,填滿任何透明的空隙。
- 一邊觀察即時 CSS 預覽,一邊調整淡出擴散值。擴散值是一個介於 10 到 90 之間的整數。調高它,能讓每種顏色在變透明之前延伸得更遠;調低它,則能讓顏色保持緊湊,並讓底色成為主導。
- 複製完整的背景宣告。輸出結果是一個 background-color,加上一個含四層以逗號分隔的 radial-gradient(...) 的 background-image 宣告。把這段程式碼貼進一個 class、一個自訂屬性、一個 CSS 模組,或一份樣式表中。
- 上線之前,先在真正的元件中測試對比度、繪製成本,以及跨瀏覽器的呈現效果。預覽畫面使用的正是輸出結果中顯示的那些宣告,因此你在頁面上看到的任何落差,都是真實的呈現差異,而不是預覽本身的問題。
產生出來的 CSS 實際上包含什麼
輸出內容刻意保持簡短,好讓它在程式碼審查時容易閱讀,也方便重新測試。一段具代表性的程式碼區塊,會設定一個 background-color,以及在 background-image 宣告中,四層以逗號分隔的 radial-gradient(...),第一個列出的圖層離觀看者最近。每個漸層都使用 circle、一個明確的位置、一個零百分比的色彩停駐點,以及一個透明的終止停駐點,因此語法標準且可檢視。
background-color 這一行位於各圖層之下,填滿漸層圓形未覆蓋到的角落,並在任何單一圖層被移除時提供備援色。這個產生器預設不會加入 background-size、background-repeat、background-attachment、background-clip 或動畫規則。只有在設計真正需要時,才加入這些規則,目標是讓這個背景的繪製成本盡可能低廉。
每個值都受整數或十六進位範圍限制:擴散值是介於 10 到 90 之間的整數,而顏色是六位十六進位值。這使得複製出來的輸出結果具有確定性,也容易用測試鎖定。這個工具附帶測試夾具,會斷言在擴散值從 20 到 90 之間時的透明停駐點、鎖定四個獨立的位置、驗證十六進位格式,並固定擴散值的邊界。
上線前先測試對比度、繪製成本與呈現效果
一個視覺上吸引人的漸層,仍然可能是一個易用性陷阱。隨著半透明圖層彼此重疊,背景顏色會隨位置不同而改變,因此同一個前景色,可能在一個角落符合對比度,在另一個角落卻不合格。請針對整個方框測試標題、內文、連結、聚焦指示器與表單控制項,而不只是測試中央位置。這個工具不會計算WCAG對比度,因為背景是連續變化的,所以這是一個需要人工完成的步驟。
對於長篇文字,可以考慮在文案後方加上一層半透明的表面圖層,或是一個更簡單的純色區塊。請尊重強制色彩模式、高對比模式、減少動態效果,以及列印樣式;使用這些模式的使用者,仍應該看得到可讀的文字與合理的背景。
疊層漸層通常很輕量,但大型的動態背景與頻繁的樣式變化,可能會提高繪製成本與耗電量。一般頁面區塊建議使用靜態背景;如果你要對位置或顏色做動畫,請在具代表性的行動裝置硬體上實測,並尊重 prefers-reduced-motion。避免使用龐大的畫面外元素與過多的濾鏡效果。CSS 漸層在不同瀏覽器、GPU、色彩空間、截圖與匯出的 PDF 之間,也可能呈現出些微差異,因此請檢查實際的目標環境,而不要只信任單一張截圖。
這個做法適合什麼情況
當所討論的漸層網格,是常見的設計系統模式時——四個焦點靠近角落、朝底色平滑混色、方框內沒有方向性的控制點——疊層 CSS 放射狀漸層就非常合適。主視覺區塊、登入畫面、卡片背景與區塊分隔線,都是典型的應用對象。對於設計系統,建議把最終的顏色,搬進具名的設計權杖(token)中,記錄預期的前景處理方式,並在你實際出貨的元件尺寸上,加入視覺回歸測試涵蓋範圍。
這個做法比較不適合擁有許多內部控制點、色彩邊界銳利,或屬於照片式混色的自由造形漸層網格。那些情況仍然需要 SVG、canvas 實作,或點陣匯出。在那些情況下,可以考慮像matching exact Figma gradient stops這樣的設計工具工作流程,能否在你退回點陣圖之前,給你更精細的製作控制權。
一旦你有了滿意的 CSS 區塊,就把它貼進你的樣式表,透過自訂屬性為顏色套用主題,讓元素能因應元件狀態而變化,不必每次品牌改版就重新匯出一張圖片。