免費CSS 漸變產生器

工作原理

漸變產生器直接在瀏覽器中建立 CSS 漸變字串——沒有庫、沒有伺服器、不上傳。一個手寫函式根據你的色標和角度即時組裝正確的 linear-gradient、radial-gradient 或 conic-gradient 語法，然後按你選擇的輸出目標格式化結果。

1. 1
   設定色標和方向

   你使用瀏覽器原生的顏色選擇器設定 2 到 6 個色標，然後用範圍滑桿將每個色標放在 0–100% 軸上的位置。對於線性和錐形漸變，你還需選擇角度（0–360°）；對於徑向漸變，你選擇形狀（橢圓或圓形）以及控制漸變延伸範圍的尺寸關鍵字。
2. 2
   buildCss 組裝漸變字串

   每次更改時，本地的 buildCss 函式都會將你的引數拼接為正確的 CSS 函式呼叫——例如 linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%)。不涉及任何庫；字串用普通 JavaScript 範本邏輯建立，直接由色標陣列拼接而成。
3. 3
   透過內聯樣式渲染即時預覽

   組裝好的漸變字串作為內聯 background 樣式直接應用到 div 元素上，由瀏覽器自身的 CSS 引擎渲染預覽。不涉及 canvas 或圖片——你看到的就是實際應用的 CSS 屬性。
4. 4
   四種格式的可複製輸出

   格式選擇器將同一漸變字串轉換為純 CSS（background: ...）、帶純色回退的 CSS 塊、Tailwind 任意值類或 SCSS 變數宣告。點選“複製”會透過 navigator.clipboard.writeText 將所選輸出寫入剪貼簿。當前漸變還會編碼到網址雜湊中，方便收藏或分享。

相關工具