🌈 CSS 漸變產生器
幾秒鐘內創建漂亮的線性或徑向 CSS 漸變 — 選擇顏色，調整角度或形狀，添加您需要的任意多個顏色停點，並點選一次複製完成的 CSS 代碼。完全免費，並完全在您的瀏覽器中運行。
°
預覽
隱私優先設計. 此工具完全在您的瀏覽器中運行 — 您輸入的內容不會上傳或儲存，而且它可以在離線狀態下使用。
關於
此工具讓您可視化建立 CSS 漸變，而無需編寫一行代碼。選擇線性漸變（linear-gradient）或徑向漸變（radial-gradient），設定角度或形狀，使用顏色選擇器和位置滑塊管理顏色停點，並即時預覽結果。內建八種預設（日落、海洋、極光、霓虹等）讓您快速起步。由於所有操作都在您的瀏覽器中本地運行，使用純 JavaScript，因此從來沒有顏色數據或設計資訊離開您的設備 — 沒有伺服器、沒有帳號。
如何使用
- 從漸變類型下拉選單中選擇漸變類型 — 線性或徑向。
- 對於線性漸變，使用滑塊或數字輸入設定角度（0–360°）。對於徑向漸變，選擇橢圓或圓形作為形狀。
- 在色彩漸變面板中點選色彩選項，以開啟色彩選擇器，然後拖動位置輸入欄，將每個漸變點精確放置在您想要的位置。
- 點選 + 加入色階，可自動在間隔最大的位置插入新的顏色階層，或點選 ✕ 按鈕刪除任何一個色階（最少需要 2 個色階）。
- 點選「複製 CSS」將完成的背景：linear-gradient(…) 或 radial-gradient(…) 宣告複製到剪貼簿，並直接貼到您的樣式表中。
常見問題
- CSS漸變產生器是否可以免費使用？
- 是的，完全免費 — 沒有訂閱、沒有帳號，也沒有隱藏的使用限制。開啟頁面即可立即開始建立漸變。
- 此工具在沒有網際網路連接時可以離線使用嗎？
- 是的。一旦頁面載入，整個工具即可離線使用，無需進行任何外部 API 呼叫、CDN 依賴或伺服器請求。在飛機上或網路受限的環境中使用也是安全的。
- 我的顏色資料或設計會傳送至伺服器嗎？
- 不。所有漸變生成和預覽渲染都是在您的瀏覽器中使用JavaScript本地完成的。您的顏色選擇僅保存在瀏覽器的localStorage中，從未傳輸到任何地方。
- 線性漸變和徑向漸變之間的差異是什麼？
- 線性漸變沿著指定角度（例如 135deg）的直線過渡顏色。徑向漸變則從橢圓或圓形的中心點向外放射顏色。兩者都能產生標準的 CSS，適用於所有現代瀏覽器。
- 我可以添加多少個顏色漸變點？
- 沒有內建的限制 — 您可以根據需要新增任意數量的顏色漸層點（最少 2 個）。新的漸層點會自動放置在漸層中間距最大的位置，並預先填入該位置的插值顏色，以提供平滑的起始點。
- 此工具會上傳我的資料嗎？
- 不會。所有運作都在您的瀏覽器中進行，因此您的資料永遠不會離開您的設備 — 頁面載入後，它甚至可以在離線狀態下使用。