🌈

CSS 漸層產生器

建立並預覽 CSS 線性與放射狀漸層。複製可直接使用的 CSS 程式碼。

設計工具 本機執行 不會傳送任何資料
CSS 漸層 線性 放射狀 設計
漸層類型
方向
●
色標
CSS 輸出

什麼是 CSS 漸層產生器？

建立並預覽 CSS 線性與放射狀漸層。新增色標、選擇方向，並立即複製可直接使用的 CSS 程式碼。

如何使用漸層產生器

  1. 選擇要使用線性或放射狀漸層。
  2. 新增或調整色彩停駐點，直到混合效果符合需求。
  3. 在即時預覽中微調角度、位置或擴散值。
  4. 準備好要在專案中使用時，複製產生的 CSS。

相關工具

🎨
配色盤產生器
產生互補色、類似色與三色配色調色盤
 🎨
顏色選擇器
在 HEX、RGB、HSL 與 CMYK 之間轉換顏色
 ⚖️
WCAG 對比檢測
檢查 WCAG AA 與 AAA 色彩對比比率，以符合無障礙要求
了解 CSS 漸層 ▾
範例
輸入 線性、90°、色標：#6366F1 → #8B5CF6
輸出 background: linear-gradient(90deg, #6366F1, #8B5CF6);
常見使用情境
  • 為行銷頁面建立主視覺背景漸層
  • 在編輯 CSS 檔案前測試角度與色標調整
  • 產生精緻的按鈕或卡片背景
  • 與開發人員分享精確的漸層 CSS，無需手動轉換
常見問題
我需要像 -webkit-linear-gradient 這樣的廠商前綴嗎？

不需要——所有現代瀏覽器（Chrome、Firefox、Safari、Edge）都支援無前綴的 CSS 漸層。只有非常舊的瀏覽器（IE 9 及以下）才需要廠商前綴。

我可以使用透明色標嗎？

可以——使用 alpha 值為 0 的 rgba() 或 hsla() 顏色，即可建立淡出至透明的效果。例如：rgba(99, 102, 241, 0) 會讓靛藍色淡出至透明。

我可以將此漸層套用於文字嗎？

可以——複製漸層值，並搭配以下 CSS 屬性使用：background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent;

色標數量上限是多少？

此工具最多支援 6 個色標。CSS 本身沒有硬性限制——瀏覽器支援數十個色標的漸層，不過效能可能有所差異。