什麼是漸層轉 CSS？

視覺化漸層產生器，支援設計線性、放射狀與圓錐漸層，可新增多個色彩節點，然後複製 CSS 程式碼。透過即時預覽調整角度、位置與顏色。

拖動色標就能即時看見漸層預覽,支援線性、放射狀和錐形三種類型。可以貼上現有的 CSS 漸層直接編輯,也能從預設(Sunset、Aurora、Rainbow 等)選色,調好角度後一鍵複製語法。輸出是純 CSS,沒有瀏覽器前綴,也沒有 JS 執行時。

使用方法

1. 選擇漸層類型（線性、放射狀或圓錐），並設定方向或角度。
2. 點擊漸層條或使用顏色選擇器，新增、刪除或調整色彩節點。
3. 複製產生的 CSS 程式碼，直接貼入您的樣式表中使用。

何時使用

• 首頁主視覺需要精準控制色標位置與角度的漸層底色。
• 樣式表中已有一段漸層,貼進來可視化編輯後再複製回去。
• 做扇形/圓餅圖風格的色塊,或彩虹色載入動畫,需要用到 conic-gradient。

結果

試試日落漸層：linear-gradient(135deg, #ff6b35 0%, #f72585 50%, #7209b7 100%)——很適合當首屏背景。

常見問題

linear、radial、conic 三種漸層差在哪?

linear 沿直線方向鋪色;radial 從中心向外輻射,形成同心圓;conic 像圓餅圖一樣繞中心旋轉掃過。三者使用相同的色標語法。

現有的 CSS 漸層怎麼匯入?

把完整宣告貼進 Import 欄位,例如 background: linear-gradient(135deg, #ff6b35, #f72585);,然後按 Import。編輯器會解析角度、色標與類型並自動填入可視化介面。

為什麼有的螢幕會看到色帶?

相鄰色標的色相落差大、加上螢幕是 8 位元色深時容易出現色帶。中間插一個過渡色標,或縮小角度跨度都會改善。支援 HDR 渲染的瀏覽器明顯不易出現色帶。

輸出的 CSS 可以當 background-image 用嗎?

可以。複製出來的字串可放進 background、background-image,或任何接受影像的 CSS 屬性——border-image、mask,甚至現代瀏覽器的 SVG fill 都支援。

輸出會帶 -webkit- 之類的前綴嗎?

不會。從 2017 年起,主流瀏覽器對 linear、radial、conic 已不再需要前綴,繼續加只會讓樣式表變雜亂,所以輸出保持乾淨。

相關工具