CSS 漸層產生器

將 background（或 background-image）屬性設為漸層函式即可。最簡單的是雙色線性漸層：background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%); — 這會從左到右繪製一個從靛藍到粉紅的漸層。在上方選擇您的顏色和角度，然後將現成的 background 那行程式碼直接複製到您的樣式表中。不需要手動撰寫語法——產生器會隨著您拖曳每個色階自動建立它。

linear-gradient 沿您選擇的角度的直線混合顏色（例如 90deg = 由左至右）。radial-gradient 從中心點向外以圓形或橢圓形擴散，像聚光燈一樣。conic-gradient 則像時鐘指針般繞中心點旋轉顏色，非常適合用於色輪和圓餅圖。本工具支援全部三種類型；可用「線性 / 放射 / 錐形」按鈕切換。Canva 的漸層背景產生器等免費工具大多只提供線性漸層，而 cssgradient.io 根本不支援錐形漸層。

將漸層套用到任何元素的 background 屬性即可。若要製作全頁背景，可以試試：body { background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%); min-height: 100vh; }。由於漸層被視為圖片，您也可以加入 background-attachment: fixed; 讓背景在頁面捲動時保持固定。在上方視覺化建立後複製 CSS 即可。不需要 Figma、Canva 或任何設計工具。2026 年在所有現代瀏覽器上不需要前綴，效果一致。

新增額外的色階，每個色階都有自己的位置。點擊漸層色條上的任何位置（或點擊「+ 新增色階」按鈕）放置新的色階，然後將其拖到您想要的位置。三個顏色的樣式如下：linear-gradient(90deg, #ff0000 0%, #ffff00 50%, #00ff00 100%)。數量沒有實際限制——根據設計需求新增任意多個色階。不像 coolors.co 只顯示色彩調色盤卻沒有實際 CSS，或 Canva 將漸層編輯鎖在帳號後方，本工具可立即產生支援無限色階的生產可用 CSS。

對於線性漸層，第一個數值是角度：0deg 朝上，90deg 朝右，180deg 朝下，270deg 朝左。您也可以使用如「to right」或「to bottom right」這樣的關鍵字，因此 linear-gradient(to right, ...) 與 linear-gradient(90deg, ...) 完全相同。拖曳角度滑桿或點擊上方的方向箭頭，數值會即時更新。輸出的 CSS 會同步更新，讓您可以直接複製貼上到任何樣式表或框架中。

2026 年，不需要。linear-gradient、radial-gradient 和 conic-gradient 在所有現代瀏覽器中均支援無前綴語法，因此單純的 background: linear-gradient(...) 就足夠了。只有針對非常舊的 Safari/iOS（2017 年以前）或舊版 Android WebView 才需要加 -webkit-。勾選 CSS 輸出中的「加入 -webkit- 前綴」，工具會在標準那行程式碼上方產生一行正確轉換的相容備用程式碼。角度轉換（webkit 版本中 90deg 變為 270deg）會自動處理。

使用漸層工具類別：一個方向類別加上 from-、via- 和 to- 顏色，例如 bg-gradient-to-r from-indigo-500 to-pink-500。若需精確的顏色，使用任意值：bg-gradient-to-r from-[#6366f1] to-[#ec4899]。切換輸出至 Tailwind 分頁，即可複製目前漸層的類別，其中包含放射和錐形漸層的 bg-[linear-gradient(...)] 任意值（Tailwind 沒有這兩種漸層的具名簡寫）。大多數 Tailwind 漸層資源都未涵蓋這個邊角案例。

點擊「下載 PNG」。工具會將您的精確漸層繪製到 1600x900 的 HTML 畫布上並儲存為 .png，非常適合用於簡報背景、社群媒體橫幅或設計原型。整個過程完全在您的瀏覽器中算繪，不會上傳任何內容。不像 TinyWow 需要將檔案上傳至伺服器，或 Adobe Express 將 PNG 匯出置於訂閱付費牆後方，這裡完全免費且資料不會離開您的裝置。需要其他尺寸？之後用任何圖片編輯器縮放或裁切 PNG 即可。

點擊「從圖片」並選取一張照片。工具會在本機讀取像素，找出最常見的顏色，並從中建立漸層——這是快速匹配品牌照片或產品圖的好方法。您的圖片永遠不會離開您的裝置；它在瀏覽器中分析後立即捨棄。不像 Adobe Color 或 Coolors 需要上傳或登入帳號才能擷取調色盤，這裡的一切都私密地保存在您的裝置上。之後您可以調整萃取的色階、更改角度，或切換至放射或錐形漸層。

錐形漸層將顏色繞中心點旋轉，而非沿線條排列，因此過渡效果像時鐘指針般旋轉。conic-gradient(from 0deg, red, yellow, green, blue, red) 可以製作完整的色輪。它非常適合圓餅圖、甜甜圈圖、進度環、顏色選擇器和角度光暈效果。自 2021 年起，Chrome、Firefox、Safari 和 Edge 均在無前綴的情況下穩定支援。選擇上方的錐形選項，設定起始角度和中心位置，然後盡情嘗試。大多數漸層產生器工具根本不支援錐形漸層。

為色階設定 alpha 值即可。降低色階的不透明度滑桿，CSS 就會切換為 rgba()。例如，linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%) 從完全透明漸變為 60% 黑色，這是照片上文字後方的經典暗幕效果。建議：在同一顏色的透明與不透明之間漸變（而非兩個完全透明的不同顏色之間），以避免瀏覽器產生混濁的灰色中間點。當您調整色階的不透明度時，工具會自動處理 rgba 輸出。

UtiloKit 的漸層產生器涵蓋了這些工具的所有功能——線性、放射和錐形漸層類型、多色階編輯器、程式碼複製——另外還提供 Tailwind CSS 輸出、PNG 下載、從圖片擷取漸層、可分享連結，以及動態漸層支援。cssgradient.io 不支援錐形漸層，也沒有 Tailwind 輸出。Colorzilla 的漸層編輯器是瀏覽器擴充功能，無法匯出 PNG 或 Tailwind。這裡的一切都在您的瀏覽器中執行，無需上傳、無需登入，且功能不被廣告所限制。

可以。本工具完全響應式，可在任何現代行動瀏覽器中運作。在 iPhone 上用 Safari 或在 Android 上用 Chrome 開啟，建立您的漸層，然後直接複製 CSS 到剪貼簿。由於一切都在客戶端執行，無需下載，且頁面載入後即使在緩慢的行動網路上也能正常使用。拖曳式色階編輯器已針對觸控輸入進行調整，因此在手機上建立多色階漸層也相當直觀。