CSS 網格漸層是將四個 radial-gradient() 色彩場疊加在單一基礎背景色上而成。
每個圓形都會從焦點處的實色開始，漸淡至透明，讓重疊的場產生柔和的網格式混色。這是圖像設計網格的近似效果，而非原生數學網格曲面。MDN 的 radial-gradient() 參考文件與 CSS Images Level 3 規格說明了此效果背後的標準語法。
四層背景模型
漸層清單使用以逗號分隔的圖層，且列出的第一個漸層會顯示在最靠近檢視者的位置。4 個固定焦點位置可讓構圖維持可預測性：2 個場位於元素頂端附近，另外 2 個位於底部附近。
| 繪製順序 | 焦點位置 | 角色 |
|---|---|---|
| 1 | 15% 20% | 列出的第一個漸層，最靠近檢視者 |
| 2 | 85% 15% | 列出的第二個漸層 |
| 3 | 20% 85% | 列出的第三個漸層 |
| 4 | 80% 80% | 列出的第四個漸層 |
基礎色位於全部 4 張影像後方，填滿每個漸層皆為透明的區域，並在漸層圖層未涵蓋完整元素時提供可預測的備援。由於背景完全由 CSS 漸層組成，因此可隨容器縮放，而不必增加影像請求。
在 60% 淡出範圍下，說明性的 4 層宣告具有以下結構：
- background-color: #18152B;
- background-image: radial-gradient(circle at 15% 20%, #6C5CE7 0%, transparent 60%), radial-gradient(circle at 85% 15%, #18C7C8 0%, transparent 60%), radial-gradient(circle at 20% 85%, #FF5C8A 0%, transparent 60%), radial-gradient(circle at 80% 80%, #F7B84B 0%, transparent 60%);
此範例中的色彩僅供說明，但結構相同：明確的圓形、固定位置、0% 處的色標，以及所選範圍處的透明終止色標。
以 5 個步驟建立漸層
- 選擇 4 種網格色彩與 1 種基礎色。 開啟 網格漸層產生器的四色工作流程。為放射場選取 4 種色彩，並為其下方的區域選擇 1 種背景色。此工具會先將全部 5 個值驗證為 6 位數十六進位色碼，再產生預覽。
- 設定淡出範圍。 選擇 10% 至 90% 之間的整數。較低的值會讓每種色彩維持在緊湊區域內，並露出更多基礎色。較高的值會讓每種色彩延伸至元素更大範圍，產生更寬廣的重疊與更柔和的混色區域。
- 檢查即時預覽。 檢查各角、中心，以及每個將放置文字或控制項的區域。預覽會使用輸出內容中顯示的完全相同宣告，因此它是所產生 CSS 結構的可靠預覽，而非另外進行算繪。
- 複製完整的背景宣告。 同時複製 background-color 與 background-image 宣告。請保留漸層順序，因為第一層最靠近檢視者。
- 整合並測試結果。 將宣告貼入類別、自訂屬性工作流程、CSS 模組或樣式表。然後在實際元件中測試對比度、繪製成本與跨瀏覽器算繪結果，而非只憑孤立的預覽判斷。
所有計算與複製作業都在目前分頁中進行。產生器不會上傳或儲存你的調色盤、CSS、預覽或螢幕截圖，且產生的背景不需要任何外部素材。
微調淡出範圍
範圍控制每種選定的色彩在變為透明前能保持可見的距離。在 10% 的較低端，4 個場的表現較像緊湊的島，彼此之間會出現可見的基礎色間隙。當數值增加至 90% 時，這些場會涵蓋元素的更大範圍，並在更大區域內重疊。如此可形成更柔和的網格式構圖，而不需依賴模糊濾鏡。
範圍並非實體模糊半徑、知覺插值設定、噪聲場或真正的網格曲面。其控制項刻意限制為整數百分比，讓複製的 CSS 維持易懂且便於測試。產生器也會使用固定焦點位置，而不允許自由拖曳 4 個錨點。
即使每個瀏覽器收到完全相同的宣告，瀏覽器的色彩插值與顯示設定檔仍可能影響 perceived blend。請將預覽視為設計指南，再於目標受眾所使用的瀏覽器、裝置與色彩設定中確認結果。
在實際元件中套用輸出內容
若要直接實作，請將複製的 background-color 與 background-image 宣告貼入控制區塊、卡片或主視覺元素的規則中。如果你的專案使用自訂屬性、CSS 模組或集中式樣式表，請將其置於對應的工作流程中，且不得變更圖層順序。
另外加入 background-size、repeat、attachment、clipping 或 animation 規則，且僅在設計需要時加入。這些屬性可能改變構圖，因此不假思索地加入可能會移動焦點或改變預定的涵蓋範圍。
靜態網格式背景很適合用於許多頁面區段，因為它不必發出影像請求就能縮放。若要進行互動式處理，請保持漸層結構完整，並將動態視為增強功能，而非必要條件。
讓文字在每個區域都易於閱讀
網格漸層可能產生局部較亮與較暗的區域，因此單一前景色在某些區域可讀，卻可能在其他區域失效。視覺上美觀的背景並不保證足夠的文字對比度，尤其是跨越大標題、內文、連結、聚焦指標與表單控制項時。
網格漸層產生器不會計算 WCAG 對比度，因為其背景會依位置持續變動。請針對整個漸層測試完整的前景處理方式，而非只檢查中心。對於較長的段落，請考慮將文字置於半透明表面之上，或在其後方使用較簡單的純色區塊。
也請檢查元件在強制色彩與高對比模式中的行為，並確認其在列印樣式中仍清楚易讀。如果背景或其色彩會移動，請遵循減少動態效果的偏好，而非將動態視為設計的必要部分。
測試算繪結果與繪製成本
跨瀏覽器外觀
產生的語法是標準 CSS，但插值、色彩管理、GPU 算繪、螢幕截圖與匯出的 PDF 可能產生細微的視覺差異。請在實際目標環境中檢查元件，不要假設完全相同的程式碼會在所有地方產生完全相同的像素。
效能與動態效果
分層漸層通常負載輕量，但大型動態背景或頻繁的樣式變更可能增加繪製成本與耗電量。一般頁面區段建議使用靜態背景。如果位置或色彩有動畫效果，請在具代表性的行動裝置硬體上測量結果，並遵循 prefers-reduced-motion。避免不必要的大型離屏元素與過量濾鏡效果。
讓漸層易於維護
對於設計系統，請將最終色彩移至具名權杖中，而非在元件各處散布未經解釋的十六進位值。請記錄預定的前景處理方式，包括任何用來保護文字易讀性的半透明面板或純色區塊。
請在實際發布的元件尺寸加入視覺回歸測試涵蓋率。緊湊的預覽無法顯示漸層延伸至實際頁面時可能出現的每種對比度、重疊或算繪問題，因此正式環境的檢查仍是工作流程的一部分，而非可選用的額外步驟。