CSS 漸層產生器

調整角度、色停與類型即時預覽 CSS 漸層,支援 linear、radial、conic,一鍵複製 background 語法。

瀏覽器端執行:輸入與輸出不會傳送到伺服器,平台也不會保存你的輸入內容。

輸入

內容不會被保存
135
0
100

輸出

填入左側欄位後按下執行。

使用方法

  1. 1選擇漸層類型。
  2. 2調整角度與色停。
  3. 3複製 CSS 貼進樣式表。

常見問題

角度是怎麼算的?

遵循 CSS 規範:0deg 由下往上,90deg 由左往右,順時針遞增。

可以做多色漸層嗎?

可以,勾選第三個色停即可;更多色停可直接在複製出的 CSS 中續加。

支援哪些瀏覽器?

linear 與 radial 支援度普及;conic-gradient 在較舊瀏覽器可能需要備援色。