正在準備工作區…
輸入
正在準備工作區…
輸出
結果將顯示在這裡。
使用方法
- 選擇「線性」或「放射狀」，設定兩種顏色。
- 調整停止點；線性漸層還可設定角度。
- 選擇「複製 CSS」，將背景宣告應用到元素。
控制 CSS 漸層
CSS 漸層透過顏色產生背景，不需單獨的圖片檔案。它能隨卡片、橫幅或區塊縮放，也便於在樣式表中修改。
此工具專注雙色漸層。可選擇線性方向或居中的圓形放射狀漸層，再透過停止點控制顏色過渡的起止位置。
方向與顏色停止點
角度僅適用於線性漸層。放射狀模式使用元素中心的圓形漸層，沒有角度設定。
停止點範圍為 0% 到 100%。兩點越近，過渡越窄；位置相同則形成清晰的顏色分界。
輸入
#2563eb → #9333ea, 135 degrees結果
background: linear-gradient(135deg, #2563eb 0%, #9333ea 100%);使用所示顏色和角度的雙停止點線性漸層。
預覽的含義
預覽直接使用產生的 CSS。其比例可能與目標元素不同，放射狀漸層尤其明顯。
第一個停止點不能位於第二個之後。此編輯器僅產生一層雙色漸層，更多停止點和圖層需自行加入樣式表。
應用宣告
複製結果以 background: 開頭。應用到目標選擇器時，請檢查可能被它覆蓋的現有背景圖、背景色或簡寫設定。
處理限制
文字輸入上限 1 MiB。CSS 與 HTML 轉換在工作執行緒中執行，限時 30 秒。顏色工具使用 sRGB；產生的樣式僅供預覽，需要在您的版面配置中測試。
延伸閱讀MDN · CSS 漸層
?
常見問題
可以增加第三種顏色嗎？
此工具支援兩個停止點。如需更多顏色，可複製 CSS 後手動加入逗號分隔的停止點。
放射狀模式為什麼沒有角度？
居中的圓形放射狀漸層從中心向外擴充，角度設定只對線性漸層有意義。
可以產生沒有過渡的顏色分界嗎？
可以。將兩個停止點設為相同位置，即可移除兩種顏色之間的過渡。
會產生圖片檔案嗎？
不會。「複製 CSS」提供背景宣告，由瀏覽器在使用宣告時繪製漸層。
為什麼實際元素上的漸層看起來不同？
目標元素的尺寸和比例會影響漸層。請在實際元素上檢查，不要僅依賴預覽卡片。