🌈

CSS 漸層產生器

以視覺化方式建立線性與放射狀 CSS 漸層。新增色標、調整位置、設定角度，並一鍵複製可直接使用的 CSS。

產生器工具 本機執行 不會傳送任何資料
CSS 漸層線性漸層放射狀漸層色標
漸層類型
角度
色標
預覽
CSS 輸出
background: linear-gradient(135deg, #7c6af7 0%, #06b6d4 100%);

什麼是 CSS 漸層產生器？

CSS 漸層產生器是一款用來建立 CSS 線性與放射狀漸層的視覺化工具。你可以新增色標、在 0—00% 尺度上設定位置、為線性漸層選擇角度，並即時查看結果。最終的 CSS 屬性可直接貼到任何樣式表中。

如何使用 CSS 漸層產生器

  1. 選擇線性或放射狀漸層類型。
  2. 若為線性漸層，請使用滑桿設定角度。
  3. 點擊色彩選擇器並調整位置，即可編輯預設色標。
  4. 如有需要，可使用 "新增色標" 按鈕新增更多色標。
  5. 點擊 "複製 CSS"，將漸層屬性複製到剪貼簿。

相關工具

🎨
圖片調色盤擷取
從圖片擷取精簡的主要 HEX 顏色調色盤。
 ☀️
圖片亮度對比
調整照片亮度與對比，並即時預覽。
 🌓
雙色調圖片
將圖片的陰影與高光對應到兩個自訂顏色。
CSS 漸層語法 ▾
範例
輸入 線性，135°，色標 1：#7c6af7 於 0%，色標 2：#06b6d4 於 100%
輸出 background: linear-gradient(135deg, #7c6af7 0%, #06b6d4 100%);
常見使用情境
  • 為到達頁和 UI 元件產生背景漸層
  • 為主視覺區塊建立漸層覆蓋層
  • 為圖表或分隔線建立色標樣式
  • 在轉移至設計工具前，先製作漸層構想的原型
常見問題
支援哪些漸層類型？

支援可自訂角度的線性漸層（0—60°）與圓形放射狀漸層。

可以新增超過兩個色標嗎？

可以。按一下「新增色標」即可新增任意數量的色標。每個色標都有獨立的顏色與位置。

如何控制線性漸層的方向？

使用角度滑桿。0° 由上到下，90° 由左到右，135° 則為對角線方向。

輸出是否相容於各瀏覽器？

Yes. The tool outputs standard CSS using the linear-gradient() and radial-gradient() functions which are supported by all modern browsers.