UrsaKit LogoUrsaKit

CSS 漸變產生器

用最多六個色標做出線性或放射狀 CSS 漸變，即時預覽並複製可直接貼上的 background-image 宣告。免註冊，全部在瀏覽器內完成。

漸層設定

0%
100%

CSS 輸出

background-image: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);

CSS 漸變是什麼

CSS 漸變是瀏覽器根據一組色標即時產生的圖片，不需要圖檔，放大也不會模糊。linear-gradient() 沿直線漸變，radial-gradient() 則由中心點向外擴散。

這個產生器負責把漸變寫出來：選好類型、拖動色標，預覽與可複製的 background-image 宣告都來自同一段字串。

如何製作 CSS 漸變

  1. 選擇「線性」或「放射狀」。
  2. 線性漸變設定角度，放射狀則不需要。
  3. 逐一調整色標：選色、輸入色碼，或拖動位置滑桿；最多可用「新增色標」加到六個。
  4. 複製 background-image 宣告，貼進你的樣式表。

CSS 漸變範例

兩色線性漸變

線性、90deg、#3B82F6 到 #8B5CF6
linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%)

放射狀漸變

放射狀、circle、#FDE047 到 #EF4444
radial-gradient(circle, #FDE047 0%, #EF4444 100%)

三個色標

線性、90deg、#0EA5E9 到 #22D3EE 到 #A7F3D0
linear-gradient(90deg, #0EA5E9 0%, #22D3EE 50%, #A7F3D0 100%)

UrsaKit 與其他 CSS 漸變產生器比較

比較項目UrsaKitcssgradient.iocss-gradient.comColorGradient.dev
費用免費免費，含廣告免費免費
線性與放射狀支援支援支援支援
可拖動的色標支援支援部分支援支援
複製完整 CSS 宣告支援支援部分支援支援
需要註冊不用不用不用不用
上傳任何內容不會不會不會不會
常見問題

常見問題

線性與放射狀漸變差在哪裡？

線性漸變沿著角度指定的直線漸變；放射狀漸變由中心點向外擴散，適合聚光燈或暗角效果。

角度是怎麼算的？

與 CSS 規範一致：0deg 朝上、90deg 朝右、180deg 朝下、270deg 朝左。

最多可以用幾個色標？

這裡是 2 到 6 個。CSS 本身沒有限制，但實務上兩、三個色標就能涵蓋絕大多數漸變。

產生的結果可以直接貼進 CSS 嗎？

可以。輸出是完整的 background-image 宣告，可直接放進 class、行內樣式或 design token。

顏色會被上傳嗎？

不會。漸變在瀏覽器內產生與預覽，不會把任何色值送到伺服器。

為什麼預覽和複製出來的程式碼一致？

兩者讀的是同一段產生的字串，所以看到的預覽就等於複製到的內容。

全部工具