網格漸層：複製 CSS 或下載 SVG
選擇 2 到 8 種顏色，就能混合成柔和平滑的網格漸層背景，並且可以拖曳色彩點調整形狀。按下複製 CSS，就能取得在任何新版瀏覽器都能使用的 CSS；按下下載 SVG，則會儲存一個 1600 × 1200、可任意縮放的檔案。所有處理都在你的瀏覽器中進行，不使用 WebGL，不需要上傳檔案，也不需要帳號。
漸層背景製作步驟
- 先看預覽。上面的小圓點就是色彩點，網格裡每一塊顏色都對應一個點。
- 按下隨機，就會產生新的隨機配色與排列，想按幾次都可以，直到看起來接近你想要的樣子。
- 打開顏色列，點一下色票就能挑選自己的顏色。按新增顏色可以增加顏色（最多 8 種），色票上的小 x 則可以移除顏色（最少保留 2 種）。
- 在 2 到 6 之間拖動複雜度滑桿，就能改變網格裡色彩點的數量。
- 拖曳圓點即可移動，用滑鼠或手指都可以。使用鍵盤時，先選取一個圓點再按方向鍵；按住 Shift 可以一次移動更多。
- 預覽滿意之後，按下複製 CSS或下載 SVG。畫面會短暫顯示已複製或已儲存，表示已經完成。
預覽會隨著每次調整即時更新，CSS 程式碼欄位則永遠顯示你目前所見畫面的 CSS。更改複雜度或按下「隨機」時，色彩點會重新排列，所以你拖曳過的圓點也會回到新的位置。
複雜度的作用
複雜度會產生複雜度 × 複雜度的色彩點格線，每個點從你的配色中取得一種顏色。點越多，網格越有變化，色塊也越小；點越少，則是寬廣而簡單的大片色彩。
- 複雜度 2：4 個色彩點，每個色塊佔畫布的 65%
- 複雜度 3：9 個點，43%
- 複雜度 4：16 個點，33%
- 複雜度 5：25 個點，26%
- 複雜度 6：36 個點，22%
有一點要注意：顏色是分配給各個點的，所以配色的顏色數量可能比網格的點還多。複雜度 2 只有 4 個點，因此 6 種顏色的配色最多只會同時顯示 4 種。把複雜度調高，其餘的顏色就會出現。
可直接貼上的漸層背景 CSS
CSS 程式碼欄位裡有兩項宣告：一個是 background-color（你配色的平均色，確保沒有任何角落是空白的），另一個是 background-image，為每個色彩點疊上一個 radial-gradient()。這是一般的 CSS，不需要圖片檔案，也不需要指令碼。
每一層都從中心的實色漸漸變成邊緣的完全透明，各層互相重疊，顏色就融合在一起。大小與位置都以百分比表示，所以漸層會依套用的元素自動伸縮。
下載網格漸層的 SVG
按下下載 SVG會儲存網格漸層.svg。檔案的 viewBox 為 1600 × 1200，包含一個相同平均色的底層矩形，以及每個色彩點對應的一個 radialGradient。因為是向量格式，用作手機桌布、簡報背景或社群貼文背景都不會失真。在不是 4:3 的框架裡，它會填滿框架並裁掉邊緣，而不是被拉伸。
如果需要 PNG，可以用瀏覽器或能讀取 SVG 的編輯軟體開啟 SVG，再依需要的尺寸匯出。
把漸層背景用在網頁與設計
- 網站或首頁主視覺區塊：把 CSS 貼進該元素的規則中。文字放在雜亂的色彩上可能不易閱讀，建議先用色彩對比度檢查工具確認。
- 簡報、桌布與社群貼文：下載 SVG，再放進或從你的設計軟體匯出。
- 配合品牌色：點一下色票，選擇自己的顏色。也可以先用圖片滴管取色器從照片或標誌中取得顏色。
兩種輸出都是目前預覽的快照。如果再次隨機，請重新複製或下載，才能取得新的版本。
常見問題
有可以複製 CSS 的網格漸層工具嗎？
有，就是這個。「CSS 程式碼」欄位會顯示一個 background-color，以及由疊加的 radial-gradient() 圖層組成的 background-image，每個色彩點對應一層。這是標準 CSS，沒有 JavaScript 或圖片檔案，在任何新版瀏覽器都能運作。按下「複製 CSS」，再貼進樣式表或 style 屬性即可。
可以把網格漸層下載成 SVG 嗎？
可以。「下載 SVG」會儲存一個 viewBox 為 1600 × 1200 的檔案。它由 radialGradient 圖層組成，所以任何尺寸都很清晰。在不是 4:3 的框架裡，它會填滿框架並裁掉邊緣，而不是被拉伸。
怎麼把漸層背景用在網站上？
複製 CSS，把兩項宣告貼進你想上色的元素規則中，例如首頁主視覺區塊或 body。色塊是以百分比定位的，會隨元素一起伸縮。請確認文字在你選的顏色上仍然看得清楚。
可以取得網格漸層的 PNG 嗎？
無法直接取得：這個工具匯出的是 CSS 和 SVG，不是 PNG。請用瀏覽器或能讀取 SVG 的編輯軟體開啟下載的 SVG，再依需要的像素尺寸匯出或截圖。
網格漸層可以做成動畫嗎？
不行。這個工具只會產生一張靜態漸層：你可以拖曳色彩點、更換顏色，但匯出的 CSS 和 SVG 不會動。
這和 Illustrator 的網格漸層一樣嗎？
不一樣。Illustrator 的網格漸層是一個由可編輯向量色塊組成的格線。這個工具則是把互相重疊的柔和放射狀漸層疊在一起，每個色彩點一層，看起來同樣平滑多彩，但匯出的是一般的 CSS 或 SVG。
哪裡可以找到漸層產生器？
這個工具就是一種漸層產生器，專門做柔和的多色網格漸層：你選擇 2 到 8 種顏色，就會得到柔和背景的 CSS。如果只需要兩種顏色的簡單漸層，也有其他工具可用；這裡產生的是不需要託管圖片的網格背景。
