CSS 漸層生成器 - 建立線性、徑向和圓錐漸層

從下拉選單選擇漸層類型。新增多個色彩停止點,建立精美的 CSS 背景。

角度 / 方向
90°
顏色停點
#6366f10%
#ec4899100%
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);

使用方法

  1. 選擇漸層類型(linear/radial/conic)
  2. 新增和編輯色彩停止點
  3. 設定方向/角度
  4. 複製 CSS 程式碼

常見問題

支援哪些漸層類型?
支援 linear-gradient、radial-gradient 和 conic-gradient。
色彩停止點有數量限制嗎?
可以自由添加多個色彩停止點。
生成的 CSS 可以直接使用嗎?
可以。複製程式碼直接貼到 CSS 檔案中使用。
資料會傳送至伺服器嗎?
所有處理均在瀏覽器中完成,不會將資料傳送至伺服器。
如何指定漸層角度?
對於線性漸層,可透過滑桿或數字輸入框設定 0 至 360 度的角度,調整角度時預覽會即時更新。

相關工具

更新記錄

最後更新:2026-02-21

  • 2026-02-21 初次發布