Affinity 的網格漸層能在單一向量物件內部產生豐富多彩的混合效果，但結果只存在於 Affinity 檔案中，無法匯出為可直接在網頁使用的 CSS。若要在真實的網頁元件上呈現相同柔和、多點的視覺，需要的是一組以固定焦點定位、疊在純色背景上的 CSS 放射狀漸層，而不是點陣圖匯出，也不是 SVG 片段。Mesh Gradient Generator 正好做到這點:你挑選四個顏色和一個基底背景色，即時預覽 CSS 效果，並在一個介於 10 到 90 之間的淡出擴散值上微調，接著直接把通過驗證的 background-color 與 background-image 宣告複製到樣式表裡。預覽所使用的宣告與輸出完全一致，所以所見即所貼。每個圖層都是一個圓形，分別位於靠近四個角落的四個固定位置，顏色會在所選的百分比處淡出至透明，這正是瀏覽器已經理解的標準 CSS radial-gradient 形狀。
Affinity 網格漸層的難題:美麗只留在檔案裡
Affinity Designer 與 Affinity Photo 都內建真正的網格漸層工具。Affinity 官方文件將網格漸層描述為:在向量物件上繪製的橫直線格，每個交叉點都有顏色停點，可套用於填色或筆畫。你可以移動節點、拖移控制把手、吸取顏色，並在單一形狀內混合多個區域。它確實是 Affinity 所推出最具表現力的漸層工具，成果往往是設計中的視覺焦點。
問題在匯出時浮現。Affinity 可以將檔案儲存為原生 .afdesign 或 .afphoto 格式，或將點陣化為 PNG 或 JPG，或將作品平面化為 SVG。這些路徑都無法把網格漸層以即時 CSS 的形式輸出。PNG 會變成固定尺寸的點陣圖，無法乾淨地縮放;SVG 匯出則會把網格平面化為向量路徑，失去平滑、繪畫感的混合。若希望網格漸層出現在真實的網頁元件上——例如主視覺區塊、卡片背景、登陸頁面——務實的做法就是用多層放射狀漸層在 CSS 裡重建其視覺。
Affinity 網格工具能做什麼，以及無法匯出什麼
Affinity 網格漸層與 CSS 實作之間的落差，是本文存在的主因。下表將應用程式內網格工具的各項能力，對應到產生器輸出中最接近的 CSS 對等做法。
| Affinity 網格漸層能力 | 產生器輸出中的 CSS 對等做法 |
|---|---|
| 在單一形狀內的多色混合 | 疊在基底色之上的四層 radial-gradient |
| 在每個格線交叉點的顏色停點 | 每個漸層圖層在其焦點的 0% 顏色停點 |
| 向相鄰區域的柔和淡出 | 擴散值，以透明終端停點表示 |
| 底層填色 | 用於基底的 background-color 宣告 |
| 可在即時的 Affinity 檔案中編輯 | 可重新進入工具，輸入新的十六進位值來編輯 |
| 隨向量物件縮放 | 隨元素的方塊縮放，不發出額外的影像請求 |
最大的差異在於精緻度。Affinity 的網格工具允許你在格線上任意擺放節點;而 CSS 做法僅使用四個固定焦點位置——15% 20%、85% 15%、20% 85% 以及 80% 80%。CSS 輸出刻意受限，以讓最終宣告保持易讀且可測試，也讓貼上的數值仍是有效、可直接複製貼上的 CSS，而不是生成出的一大坨語法。對大多數網頁背景——全滿版主視覺、分隔區塊、卡片表面——這項限制反而是優點，因為它能在各瀏覽器間產生可預期的行為。
多層 CSS 放射狀漸層為何能作為替代方案
標準的 CSS radial-gradient 語法定義於W3C CSS Images Level 3 規範中，並記載於MDN 的 radial-gradient 參考頁面，它會繪製一個在顏色停點之間過渡的圓形或橢圓。透過在基底色之上堆疊多個這類圖層，瀏覽器會將它們合成為互相重疊的半透明形狀，而人眼會將其解讀為類似網格的混合。每個圖層的顏色會在其中心從完全不透明，接著在擴散百分比處淡出至透明，讓未被任何圖層覆蓋的地方顯現出基底色。
以逗號分隔的 background-image 圖層順序很重要:列在第一個的圖層最靠近觀察者，最後一個則最靠近基底色。產生器以固定的繪製順序輸出這四個圖層，確保混合效果在各瀏覽器中一致。較小的擴散值會產生較緊湊、各自分離的色塊，圖層之間保留較多基底色;較大的值則讓圖層在元素上更廣泛地混合，形成更柔軟的混合區域。這個控制是有界的，且僅接受整數，因此輸出在 DevTools 中易於理解、在設計系統的差異檢視中也易於審閱。
使用 Mesh Gradient Generator 建立對應的 CSS
依照下列步驟，將你在 Affinity 設計的網格漸層轉為可直接複製的 CSS。
- 開啟 Mesh Gradient Generator。頁面載入後會顯示即時預覽，以及工具接受的一樣六個輸入欄位:四個網格顏色、一個基底背景色，以及一個擴散值。
- 從你的 Affinity 網格中擷取四個顏色。為 Affinity 網格中的每個焦點區域挑選一種顏色，並以六位數十六進位值輸入。瀏覽器的顏色挑選器會輸出工具驗證相同格式的六位數十六進位，所以顏色不需要任何轉換或正規化。
- 設定基底背景色。從 Affinity 網格未混合的區域中吸取主要背景色調，或選擇能襯托四個網格顏色的中性色。這個顏色會填滿所有四個圖層皆透明處，並提供可預期的備援圖層。
- 將擴散值從 10 調整到 90，同時觀察即時預覽。20 左右的數值會產生緊密、彼此分離的色塊;70 左右的數值則產生柔軟、完全混合的網格。挑選與你要重現的 Affinity 網格視覺感受相符的數值。
- 複製完整的背景宣告。輸出面板會同時顯示 background-color 規則與完整的 background-image 堆疊。將兩者一起選取並複製。因為預覽與輸出使用完全相同的語法，你在預覽看到的就是元件實際會繪製的結果。
- 貼上宣告到 class、自訂屬性、CSS 模組或樣式表之中。只有在設計確實需要時，才另外加入 background-size、background-repeat、background-attachment、background-clip 或動畫規則。
解讀擴散控制項與調整混合
擴散值是工具中最具決定性的單一控制項。它決定每個圖層的顏色在到達完全透明時的百分比。由於控制項的上限介於 10 與 90 之間，並僅接受整數，輸出永遠不會落入難以在 DevTools 中除錯的非整數。三個範例區段的實際效果彙整於下表。
| 擴散值 | 視覺效果 | 適用情境 |
|---|---|---|
| 20–30 | 色塊緊湊、彼此之間可見基底色 | 重現每個區域讀起來像是獨立色塊的 Affinity 網格 |
| 40–60 | 平衡的混合，重疊區域會出現中間色調 | 上方有內文的通用主視覺或卡片背景 |
| 70–90 | 柔軟、近乎均勻的網格，過渡細微 | 前景內容為主、氣氛型的背景 |
如果渲染出來的混合對設計而言太過安靜，降低擴散值，讓基底色與色塊顏色讀得更清楚;如果渲染出來的混合太過雜亂，則提高擴散值，讓圖層互相重疊，消除接縫。每次調整後重新複製宣告，因為輸出會依當下的輸入狀態重新生成。
將 CSS 整合進真實元件
複製好宣告後，請放到實際的元素上，而不是佔位的 div。background-image 堆疊是相對於元素的方塊繪製的，所以 320 像素的手機卡片與 1440 像素的主視覺會在相同的百分比位置顯示同樣的四個焦點。背景會隨元素縮放，既不增加影像請求，也不引入相依套件，因此能維持頁面重量平穩，並避免使用 canvas、SVG、點陣或渲染函式庫等此工具明確不引入的相依項目。
對生產用的設計系統而言，可將四個網格顏色與基底顏色移入具名權杖(例如 --bg-mesh-1 到 --bg-mesh-base)，並在宣告中引用這些權杖。如此一來，只要變更單一權杖，就能在所有使用處重新調整網格背景的主題，包括淺色與深色變體，而不必逐一修改每個消費者。請在同一份權杖檔案中記錄預期的前景處理:哪些文字顏色、哪些連結顏色、哪些焦點環顏色應放在網格之上，以及適用的元件尺寸。
只有在設計確實需要時，才另外加上尺寸、重複、附加、裁剪或動畫規則。產生器的輸出刻意保持精簡，讓消費者元件自行掌握這些決定。如果要為位置或顏色加上動畫，請在具代表性的行動裝置硬體上量測繪製成本，並尊重 prefers-reduced-motion。
上線前的測試
多層 CSS 漸層通常很輕量，但混合效果會隨位置連續變化，因此同一個前景色在某處可能清晰可讀，在另一處卻對比不足。請在整個背景上測試標題、內文、連結、焦點指示與控制項——上方、中間、下方，以及四個焦點——而不只是中央。對比不足時，在長段文字下方加入半透明的表面圖層，或將該段落改為更簡潔的純色背景。本工具並不計算 WCAG 對比，因為背景並非單一顏色。
CSS 漸層在不同瀏覽器、GPU、色彩空間、螢幕截圖與匯出 PDF 之間，可能呈現細微差異，因為顏色內插與顯示器描述檔都會影響感知到的混合。請檢查實際的目標環境，而不只是你本機的 Chrome。請一併考量強制色彩模式、高對比模式、prefers-reduced-motion 以及列印樣式，這些都可能讓網格風格的背景塌縮或失真。請為你上線的尺寸加入視覺回歸測試，避免權杖變動或瀏覽器更新時，混合效果被悄悄地改變。
對生產用的設計系統而言，請將網格漸層視為一般頁面區塊的靜態背景。避免巨大的離屏元素與過多的濾鏡效果，因為這會增加繪製成本。產生器不會上傳或儲存任何調色盤、CSS、預覽或螢幕截圖，也不新增任何相依套件，因此從輸入到貼上宣告的工作流程完全在本機完成。