CSS 網格漸層是一種色彩豐富的背景，做法是在單一底色之上堆疊四個標準的 radial-gradient(放射狀漸層)圖層，每個圖層從中心選定的顏色，淡化到某個固定百分比時變為透明，使得顏色只在圓形重疊的區域相互混色。最終效果看起來像柔軟、如畫般的網格，但完全由 CSS 生成——不需要 canvas、SVG、點陣圖或任何外部函式庫。由於背景是由宣告式放射狀漸層所組成，無論套用在哪個元素上都能隨之縮放，也不會增加任何 HTTP 請求，而且每個顏色都可以直接在樣式表中編輯。這項技巧在任何支援 CSS Images Level 3 radial-gradient() 函式的現代瀏覽器中都能運作，輸出內容足夠簡潔，能像其他 CSS 一樣閱讀、貼上並納入版本控管。正是這些固定的角落位置、透明終點以及有界的淡色範圍，讓結果足夠穩定而可以上線:每個輸入都被嚴格限制，產生的宣告也正是即時預覽所實際繪製的同一段 CSS。
CSS 網格漸層究竟是什麼
在設計工具中，「網格漸層(mesh gradient)」通常指的是真正的網格曲面——一組色彩節點，在控制點之間進行內插。Adobe Illustrator 與 Figma 能產生這類效果，是因為它們會渲染到位元或向量畫布上，得以進行像素或頂點層級的內插。CSS 至今仍未將此模型作為原生屬性公開，因此當開發者談論「CSS 網格漸層」時，他們指的是較為溫和的做法:堆疊多個重疊的放射狀漸層，整體組合後在視覺上呈現類似的柔軟、多色印象。
這個區別很重要，因為分層方式具有明確、可預期的限制。每個放射狀漸層都是一個圓形，中心為單一顏色，在圓形結束之前淡化為透明。瀏覽器會由前至後合成全部四個圓形，清單中第一個漸層最靠近觀察者，底色則填滿任何圓形都未覆蓋的區域。視覺效果近似網格，但並非連續的內插場域;在 Figma 中移動控制點，與在 CSS 中編輯顏色，並不是同一種操作。
分層放射狀漸層的運作方式
這項技巧仰賴四個宣告於 background-image 屬性中的 radial-gradient() 函式(以逗號分隔)，以及一個 background-color 值。每個函式都使用明確的 circle 形狀語法與固定百分比表示的中心點，因此只要瀏覽器支援該標準，同一段宣告就能產生相同的版面。瀏覽器所提供的六位數十六進位色彩輸入，與產生器所驗證的格式相符，因此您選用的數值可以原封不動地往返輸出，不需要轉換。
四個固定位置會將圖層錨定在元素的角落附近:15% 20%、85% 15%、20% 85% 以及 80% 80%。每個漸層從 0% 處的選定顏色開始，於所選的擴散百分比處轉為透明。由於終點為透明，僅被單一圖層覆蓋的區域會顯示該圖層顏色向底色混色的結果，而兩個或三個圖層重疊的區域，則會將所有參與的顏色混合在一起。
為了讓分層網格保持可預期且易讀，每個輸入都受到限制。顏色必須是六位數十六進位值，擴散值必須是 10 到 90 之間的整數。這些限制讓產生的 CSS 易於閱讀、易於測試，也易於融入設計權杖(設計 token)工作流程。這個控制項並非知覺內插設定、雜訊場域或真正的網格曲面——它只是一個整數，控制每個圖層的顏色在變為透明前能延伸多遠。
一步步建立網格背景
- 在瀏覽器中開啟 Mesh Gradient Generator。介面會載入預設顏色與預設擴散值，讓您在調整時有基準可對照。
- 選擇四個網格顏色與一個底色。四個網格顏色是結果中可見的「色塊」;底色則填補空白區域，並在任何圖層未能覆蓋到元素角落時作為備援。
- 調整淡色擴散值。此控制項以整數級距從 10% 跨至 90%。較低的數值會讓每個顏色保持緊密，使底色在圓形之間佔據主導;較高的數值則會讓顏色向外延伸更多，在中心區域形成更柔和、更融合的效果。
- 隨著每次輸入變更，即時觀察 CSS 預覽更新。預覽所使用的繪製宣告，正是您將複製的內容，因此所見即瀏覽器所渲染的結果。
- 從輸出面板複製完整的 background-color 與 background-image 宣告。
- 將宣告貼到某個 class、自訂屬性、CSS 模組或樣式表，使其對應到您想要套用背景的元素上。僅在設計確實需要時，再另外加入 background-size、repeat、attachment、clipping 或 animation 等屬性——產生器刻意不包含這些屬性。
- 在實際元件中測試結果:檢查文字對比、在具代表性的硬體上的繪製成本，以及漸層在您使用者實際使用的瀏覽器與色彩設定檔下的呈現。
選擇顏色與調整淡色擴散
在分層做法中，淡色擴散是影響色彩混色最關鍵的控制項。較小的擴散值會讓底色保留更多可見區域，產生看起來像是獨立色彩「島嶼」的效果;較大的擴散值則讓圖層延伸得更遠、重疊更多，在元素中央產生混合色調。由於擴散僅接受整數，您在測試中與團隊工作流程中嘗試的每個數值都能完整重現。
| 擴散值 | 視覺效果 | 適用情境 |
|---|---|---|
| 10 – 20% | 色彩島嶼緊密，島嶼之間大多可見底色 | 大膽、高對比的背景，讓底色作為主導介面 |
| 30 – 50% | 重疊均衡，每個區域的色彩識別度清晰 | 主視覺區塊與特色面板，每個顏色仍應可辨識 |
| 60 – 80% | 大量混色，元素大部分呈現柔和的混合色調 | 退居內容之後的氛圍背景 |
| 90% | 最大延伸，角落色彩飽和度最強，中央幾乎完全融合 | 滿版背景，以分層外觀本身作為主要視覺重點 |
挑選一個能與四個網格顏色和諧搭配的底色。若網格顏色偏暖，使用冷色或中性底色能避免結果顯得混濁;若需要讓四個顏色清楚區隔，請選擇與每個顏色都形成對比的底色，並使用較低的擴散值，讓底色能透出來。
在正式環境中，請將選定的顏色抽離為設計權杖(CSS 自訂屬性或您框架的權杖系統)，而不是到處貼上原始十六進位值。產生器會驗證六位數十六進位輸入，因此不接受該格式以外的內容;但在下游流程，您自己的權杖系統仍應作為唯一真相來源。請在每個權杖旁記錄其預期的前景處理方式，讓任何重複使用此漸層的人都知道文字應如何置於其上。
檢查對比、效能與跨瀏覽器渲染
網格背景在本質上就是一個持續變化的表面。在元素某一處具有可接受對比的前景色，在五百像素之外未必仍可接受，因為下層色彩會隨著每個圖層的擴散與位置而改變。請在整個背景上測試標題、內文、連結、焦點指示與表單控制項，而不僅僅是中央區域。若需要在網格上放置長篇文字，請考慮加上一層半透明表面，或在文字背後使用較簡單的實色區塊，而不是只依賴漸層。
靜態的分層漸層通常很輕量，因為瀏覽器只需繪製一次四個放射狀漸層。當您對位置、顏色或大小進行動畫，或網格元素特別大、位於畫面外，或被昂貴的濾鏡覆蓋時，成本便會上升。一般頁面區塊請優先使用靜態背景。若真的要進行動畫，請在具代表性的行動裝置硬體上測量繪製與幀率時間，並尊重 prefers-reduced-motion，為要求減少動畫的使用者停用動畫。請避免使用巨大的畫面外元素，以及疊加在網格之上的過多濾鏡效果。
CSS 漸層語法已於 CSS Images Level 3 規範 中標準化，並在 MDN 的 radial-gradient 參考文件 中有詳細說明，但實際渲染的像素仍會因內插與色彩管理而在不同瀏覽器、GPU、色彩空間、截圖與匯出的 PDF 之間產生差異。請務必檢查實際的目標環境——模擬器、設計預覽與截圖本身都不足夠。應同時尊重強制色彩與高對比模式，而列印樣式則應退回到實色或更簡化的處理。
由於產生的背景使用的是標準語法，所有計算與複製作業都在您目前的分頁中完成。不會上傳任何調色盤、CSS 字串、預覽或截圖，此工具也不會新增任何執行階段依賴。這使其易於整合進視覺回歸測試:在您實際出貨的尺寸下擷取元件，並鎖定渲染結果，讓未來的顏色變更是刻意的，而不是意外。
如果您正在權衡各種選項，Box Shadow Generator Explained: Inside Each CSS Parameter 對此有詳細說明。
如果您正在權衡各種選項，How to Make Nice CSS Buttons With a Visual Workbench 對此有詳細說明。