漸層產生器

設計線性、放射與圓錐漸層，匯出 CSS 或圖片

檔案不會離開你的裝置
在瀏覽器本機執行
免費、免註冊、無浮水印

色標

點擊色條新增色標；拖曳控點移動位置，方向鍵微調，Delete 刪除。

程式碼

background: linear-gradient(135deg, #4f46e5 0%, #5d45e5 3.13%, #6a44e5 6.25%, #7643e3 9.38%, #8243e1 12.5%, #8d42de 15.63%, #9742db 18.75%, #a141d6 21.88%, #ab41d1 25%, #b541cc 28.13%, #be42c6 31.25%, #c642bf 34.38%, #cf42b8 37.5%, #d743b1 40.63%, #de44a9 43.75%, #e546a1 46.88%, #ec4899 50%, #f14b90 53.13%, #f54e87 56.25%, #f8527e 59.38%, #fb5775 62.5%, #fe5b6c 65.63%, #ff6063 68.75%, #ff665a 71.88%, #ff6c51 75%, #ff7247 78.13%, #ff783e 81.25%, #ff7e35 84.38%, #ff842b 87.5%, #fd8b21 90.63%, #fb9118 93.75%, #f89810 96.88%, #f59e0b 100%);
background: linear-gradient(in oklch 135deg, #4f46e5 0%, #ec4899 50%, #f59e0b 100%);

第一行是預先計算色標的相容寫法，供不支援 “in oklab/oklch” 的瀏覽器使用。

如何使用漸層產生器

製作線性、放射狀與錐形漸層，色標數量不限，可在 sRGB、OKLab 或 OKLCH 中混合。可複製為 CSS、Tailwind 或 SVG，或下載最大 8192 像素的 PNG、JPG 或 WebP 圖片。

選擇「類型」（線性、放射狀或錐形），設定「角度」「形狀」或中心點；放射狀與錐形漸層可以直接在預覽上拖曳中心。

編輯「色標」：點色條新增色標，拖曳把手移動位置，並在清單中修改每個色標的顏色與位置。

選擇「顏色混合空間」（sRGB、OKLab 或 OKLCH），也可以從「預設」或「隨機」開始。

在 CSS、Tailwind 或 SVG 分頁複製程式碼。

需要圖片時，設定「寬度」「高度」或選一個常用尺寸，選 PNG、JPG 或 WebP 後按下載。

常見問題

sRGB、OKLab、OKLCH 混合有什麼不同？

sRGB 是傳統 CSS 混合方式，互補色中間可能變灰；OKLab 在感知上均勻，中段不會混濁；OKLCH 沿色相環過渡，顏色更鮮豔。

OKLab、OKLCH 漸層在舊瀏覽器能顯示嗎？

CSS 輸出的第一行是備援寫法，用預先算好的色標相容不支援 “in oklab/oklch” 的瀏覽器。SVG 程式碼和下載的圖片也使用預先算好的色標，在哪裡看都一樣。

為什麼錐形漸層不能匯出 SVG？

SVG 本身沒有錐形漸層，請改為下載 PNG、JPG 或 WebP 圖片。

可以使用透明色標嗎？

可以，rgba() 或 #rrggbbaa 等帶透明度的顏色都能用。要保留透明請下載 PNG 或 WebP，JPG 不支援透明色版。

圖片是在伺服器上產生的嗎？

不是。圖片在瀏覽器的畫布上繪製後直接儲存，每邊尺寸可在 1 到 8192 像素之間。

怎麼用鍵盤微調色標？

選取色標把手後，方向鍵每次移動 1%（按住 Shift 為 10%），Home 和 End 跳到兩端，Delete 刪除。漸層至少保留兩個色標。