漸層產生器

使用可拖曳的多色標控制和精選預設，從零開始建立線性、放射狀和圓錐 CSS 漸層。立即複製可貼上的 CSS。

即時預覽

預設

漸層類型

線性放射狀圓錐

角度

色標

拖曳控制點移動色標，或點擊漸層條新增色標。選取色標可編輯其顏色。

已選取的色標

色標顏色

色標位置

CSS

background: —;

所有計算均即時在您的瀏覽器中完成——無需註冊，完全免費。

關於漸層產生器

漸層產生器能從零開始建立自訂的 CSS 漸層。選擇線性、放射狀或圓錐狀類型,設定角度,並使用多停駐點編輯器來塑造混色效果:拖曳控點移動停駐點,點擊色條新增新的停駐點,並用選色器為任一停駐點重新上色──即時預覽會隨著你的操作同步更新。

精選預設能在你不想從空白開始時提供一個強而有力的起點,而隨機、反轉、旋轉 45° 等一鍵操作能加快探索速度。產生的 CSS 一直可見,並與預覽保持同步,因此你複製的內容正是你看到的效果。

一切都在你的瀏覽器中即時運算,完全免費。複製完整的 CSS 規則或僅複製背景數值,貼到樣式表、按鈕樣式或英雄區塊中──這是一款用於背景、覆蓋層與 UI 強調效果的簡單好用的 CSS 漸層產生器。

是的。這個工具完全在用戶端運行──不需要註冊、不需要點數,對於你建立或複製多少漸層也沒有限制。

線性漸層沿著你選擇的角度、以直線方式混合顏色。放射狀漸層則從中心點向外以圓形擴散。圓錐狀漸層則像圓餅圖一樣,圍繞中心點掃過各種顏色,非常適合用於色輪與進度環。

一個漸層至少需要兩個停駐點,你可以不斷點擊色條來新增更多。每個停駐點都有自己的顏色與可拖曳的位置,因此建立複雜的多色混合非常容易。

線性與放射狀漸層在各處都受支援。圓錐狀漸層在所有現代瀏覽器中都受支援,但非常舊的瀏覽器則不支援,因此若需要支援舊版瀏覽器,請提供一個備用的 background-color。

可以──使用搭配的「圖片漸層產生器」工具,它會擷取上傳圖片的主要色彩,並將其轉換為可編輯的漸層停駐點。這個工具則是從零開始建立的對應版本。