線性與放射狀漸層有何差異？

線性漸層沿著你設定的角度（例如 90deg 從左到右）進行顏色過渡，而放射狀漸層則從中心點向外以圓形擴散。建議用線性漸層處理背景與按鈕，用放射狀處理燈光、光暈或柔和的邊框。

顏色漸層點與位置是如何運作的？

每個漸層點包含一種顏色與一個從 0% 到 100% 的位置。瀏覽器會在漸層點之間平滑插值顏色。加入更多漸層點，可讓特定點保留或移動顏色，產生多段漸層，而非簡單的兩色過渡。

產生的 CSS 是否支援所有瀏覽器？

是的。linear-gradient() 與 radial-gradient() 是標準 CSS，可在所有當前瀏覽器中使用，無需字首、圖片或外部套件。輸出為單一背景值，可直接貼入你的樣式表中。

色彩漸層生成器

視覺化建立線性與放射狀 CSS 漸層，並以一鍵複製可直接使用的程式碼。

隱私權：你的檔案不會離開裝置，所有處理均在瀏覽器本機完成。

使用方式

1.選擇漸層型別——線性用於方向性漸層，放射狀用於中心向外的漸層。
2.設定每個漸層點的顏色並拖動其位置滑桿；新增或刪除漸層點，並調整線性漸層的角度。
3.檢視即時預覽，然後點選複製 CSS 以取得可直接貼上的背景宣告。

關於色彩漸層生成器

一個 CSS 漸層生成器，僅需幾種顏色選擇，即可產出有效且可複製的漸層值，直接貼入樣式表中。此工具支援你實際使用的兩種漸層型別：線性漸層（linear-gradient()）沿著你設定的角度平滑過渡（0deg 指向上方，90deg 指向右方，180deg 指向下方），而放射漸層（radial-gradient(circle, ...)）則從中心點向外漸漸擴散——適用於燈光、按鈕或柔和光暈。你選擇型別、設定角度，並立即取得精確的 CSS 輸出。

每一個漸層都由顏色漸層點（color stops）定義。每個漸層點包含一種顏色與一個從 0% 到 100% 的位置，瀏覽器會自動在兩者之間插值像素。兩個漸層點產生從一種顏色平滑過渡到另一種的漸層；加入第三或第四個漸層點，例如在 50% 處保留 #00ff00 顏色，即可產生多段漸層，而非單一兩色過渡。拖動或重新排序漸層點，工具會自動依位置排序，並將所有值限制在有效的 0 至 100% 範圍內，因此無論如何編輯，輸出的 CSS 都會語法正確。

漸層廣泛應用於現代介面設計中：首頁與區塊背景、按鈕與卡片填色、標記與圓形標籤、進度條、懸停狀態、圖片疊加層以確保白字可讀，以及裝飾性分隔線。由於輸出為純文字 CSS，而非匯出圖片，因此可在所有當前瀏覽器中使用，無需廠商字首、無需外部套件，也無需建構步驟。僅需一個 CSS 屬性、零網路請求，且漸層可精準縮放至任意元素尺寸或螢幕密度，從不模糊或像素化。

即時預覽會顯示你操作時的實際渲染結果，程式碼面板則會輸出完整宣告——background: linear-gradient(...)——讓你可以完整複製到專案中。調整線性漸層的角度滑桿，修改每個漸層點的顏色與位置，新增或刪除漸層點，或點選「隨機化」探索手動無法想到的新組合。當結果符合需求時，僅需點選一次即可將 CSS 複製到剪貼簿。所有操作皆在瀏覽器本機執行，因此你設計的內容絕不會上傳至伺服器。

常見問題

線性與放射狀漸層有何差異？: 線性漸層沿著你設定的角度（例如 90deg 從左到右）進行顏色過渡，而放射狀漸層則從中心點向外以圓形擴散。建議用線性漸層處理背景與按鈕，用放射狀處理燈光、光暈或柔和的邊框。
顏色漸層點與位置是如何運作的？: 每個漸層點包含一種顏色與一個從 0% 到 100% 的位置。瀏覽器會在漸層點之間平滑插值顏色。加入更多漸層點，可讓特定點保留或移動顏色，產生多段漸層，而非簡單的兩色過渡。
產生的 CSS 是否支援所有瀏覽器？: 是的。linear-gradient() 與 radial-gradient() 是標準 CSS，可在所有當前瀏覽器中使用，無需字首、圖片或外部套件。輸出為單一背景值，可直接貼入你的樣式表中。

色彩工具使用指南

查看全部

使用方式

關於色彩漸層生成器

常見問題

相關工具

色彩工具 使用指南

色彩工具使用指南