什麼是網格漸層產生器？

為網站背景、社群媒體圖片和 UI 設計產生多色網格漸層。選擇顏色、調整控制點位置，取得超越簡單線性或放射狀漸層的有機效果。

畫布把多個放射狀漸層疊在一起，每個控制點對應一層。拖曳控制點重新塑造混合效果，用色塊替換它的顏色，程式碼會即時更新。最多六個點能讓結果保持平衡。可按 1920x1080 等橫幅尺寸匯出為 PNG 或 SVG，把 SVG 直接貼到 Figma，或將程式碼取為 CSS、SCSS 或 Tailwind。

使用方法

1. 點選色塊或輸入十六進位色碼來選擇基礎顏色，最多可新增 6 個色彩控制點。
2. 在畫布上拖曳控制點來改變漸層的流向。
3. 將程式碼複製為 CSS、SCSS 或 Tailwind，或把漸層下載為 PNG 或 SVG。

何時使用

• 做不像範本套出來的 Banner 背景。
• 為產品卡片或歌單封面填色,但不想用具體圖片。
• 替 App 載入頁與空狀態做占位背景圖。

結果

一位 UI 設計師用 4 個控制點建立了從紫色到青色的網格漸層，用於登陸頁的首屏區域，然後複製 CSS 程式碼直接貼到樣式表中。

常見問題

網格漸層和線性漸層有什麼差別?

線性漸層只是沿一條軸混合兩種顏色。網格漸層是把多個柔和色斑疊在一起,效果更像水彩暈染,而不是乾淨的過渡。顏色之間的界線更難看出來。

為什麼 CSS 用 radial-gradient 而不是 conic-gradient?

放射狀漸層的瀏覽器相容性最廣,降級也最乾淨。工具為每個控制點輸出一段 radial-gradient,然後用 background-image 疊加合成,所有現代瀏覽器都能直接繪製,不需要 polyfill。

網格漸層在 Safari 和 Chrome 看起來一樣嗎?

一樣。輸出用的是標準 CSS radial-gradient,不需要任何瀏覽器前綴。Safari、Chrome、Firefox、Edge 繪製結果完全一致。舊瀏覽器會退回到第一個顏色。

最多可以用幾個控制點?

最多六個。再多通常會讓顏色變混濁,而不是更豐富。兩到三個點適合做裝飾風的乾淨漸層,四到六個則更接近水彩畫的柔和效果。

可以匯出成 SVG 嗎?

可以。SVG 匯出以堆疊的 radial-gradient 圖層來建構漸層，因此凡是 CSS 漸層能用的地方都能顯示，也能直接貼到 Figma 當作形狀填色。符合規範的真正 SVG 網格漸層目前在任何地方都還不被支援，所以這種堆疊方式才是不論貼到哪裡都真正可用的版本。

相關工具