免費線上漸層產生器
建立 CSS、流體動畫與 Mesh 漸層。可即時預覽，並依工具匯出圖片、WebM 影片或 CSS/Tailwind 程式碼。
CSS 漸層產生器
開始 CSS 漸層
建立線性或徑向 CSS 漸層並匯出為 PNG 或 CSS 程式碼。
流體漸層產生器
開始流體漸層
建立以 Three.js 呈現的動畫漸層，並匯出 PNG 或 WebM。
Mesh 漸層產生器
開始 Mesh 漸層
使用可拖曳控制點建立多層次 Mesh 漸層，並匯出 PNG、JPG 或 WebP。
為什麼選擇我們的漸層產生器？
建立 CSS、流體或 Mesh 漸層，並即時預覽與匯出。
即時預覽
編輯顏色和形狀時，即時查看變更。
多種格式
依工具匯出 CSS、Tailwind、PNG、JPG、WebP 或 WebM。
免費使用
所有工具完全免費，無需註冊。
高解析度匯出
依需求設定輸出尺寸，下載清晰的圖片或 WebM 影片。
如何建立漸層
依照以下步驟設計並匯出漸層。
- 1
選擇類型
選擇 CSS、流體或 Mesh 漸層。
- 2
編輯顏色
新增、拖曳並調整色標或 Mesh 控制點。
- 3
設定
依需求設定角度、速度、強度或解析度。
- 4
匯出
下載 PNG、複製 CSS/Tailwind 或匯出影片。
使用案例
網頁設計
產生適用於網站或 UI 元件的背景漸層。
社群媒體
為貼文和限時動態製作引人注目的圖形。
簡報
為簡報與 PDF 製作有層次的漸層背景。
品牌
設計客製化的漸層調色盤，用於品牌識別。
常見問題
漸層會在瀏覽器中處理嗎？
會。漸層建立與匯出都在瀏覽器中進行，不會上傳圖片檔案。
有哪些匯出格式可供使用？
CSS 漸層可複製 CSS/Tailwind 或匯出 PNG；流體漸層可匯出 PNG、WebM；Mesh 漸層可匯出 PNG、JPG、WebP。
可以自訂匯出尺寸嗎？
可以。CSS、流體與 Mesh 漸層工具都提供輸出尺寸設定，實際可用尺寸會受到瀏覽器與裝置效能影響。
Need to split the images you just designed?
Move from gradients to Instagram grids, seamless carousels, or custom image splits without leaving the browser.