漸層產生器
建立精美的 CSS 漸層，即時預覽效果。選擇預設或自訂漸層。複製 CSS 程式碼或下載 PNG 圖片。
CSS
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);0°360°
%
%
所有處理均在瀏覽器中完成，不會向任何伺服器傳送資料。
如何建立漸層
1
選擇類型
選擇線性、徑向或錐形漸層類型。
2
設定顏色
新增顏色節點並調整位置，精細調整漸層效果。
3
調整角度
使用角度滑桿控制漸層方向。
4
匯出
複製 CSS 程式碼用於網站，或下載 PNG 圖片。
常見問題
可以建立哪些類型的漸層？
您可以建立三種類型：線性漸層（直線顏色過渡）、徑向漸層（從中心向外的圓形顏色過渡）和錐形漸層（圍繞中心點的顏色過渡，類似圓餅圖）。
產生的 CSS 程式碼可以直接使用嗎？
可以！點擊複製 CSS 按鈕即可複製漸層程式碼，直接貼到 CSS 檔案中作為 background 屬性使用。所有現代瀏覽器均支援。
下載圖片的最大尺寸是多少？
您可以將輸出尺寸設定為最大 4096 x 4096 像素。預設為 800 x 600 像素，適合大多數網頁背景使用。
顏色節點是如何運作的？
顏色節點定義漸層中的顏色及其出現位置。每個節點有一個顏色和一個位置值（0-100%）。至少需要 2 個節點，可以新增更多以實現複雜漸層效果。
我的資料安全嗎？
完全安全。所有漸層產生均在瀏覽器中透過 Canvas 完成。不會向任何伺服器傳送資料，也不會儲存或追蹤任何內容。
使用情境
網頁設計背景
使用自訂 CSS 漸層建立吸引眼球的 Hero 區域、橫幅和頁面背景，與品牌風格完美搭配。
社群媒體圖片
為社群媒體貼文、限時動態和封面圖片產生鮮豔的漸層背景，在動態中脫穎而出。
簡報投影片
設計專業的投影片背景，流暢的顏色過渡提升簡報效果。
UI 元素
為按鈕、卡片、導航列等 UI 元件新增漸層背景，打造現代外觀。
郵件設計
下載漸層圖片用於郵件標頭和背景，適合不支援 CSS 漸層的郵件用戶端。
應用設計與原型
快速使用漸層背景製作應用介面原型。匯出 CSS 用於 Web，或匯出 PNG 用於原生應用模型。
建立完美的漸層
即時預覽設計精美漸層。複製 CSS 或下載 PNG - 免費且簡單。