CSS 工具
CSS 漸層產生器
免費線上CSS 漸層產生器，無需帳號、不用安裝，完全在瀏覽器中運行。
生成的 CSS 程式碼
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);
預設漸層庫
什麼是 CSS 漸層產生器？
CSS 漸層產生器是一個視覺化工具，讓您無需手寫代碼就能快速建立專業的 CSS 漸層效果。支援線性漸層和放射漸層兩種模式，可自訂色彩節點、方向和位置，即時預覽效果，並一鍵複製生成的 CSS 程式碼。
如何使用 CSS 漸層產生器？
- 選擇模式：在「線性漸層」和「放射漸層」之間切換
- 設定方向：使用角度滑塊或點擊方向按鈕調整漸層方向
- 新增色彩：點擊色彩節點的顏色條打開拾色器，調整位置百分比
- 預覽效果：上方預覽區域會即時顯示漸層效果
- 複製程式碼：點擊「複製程式碼」按鈕將 CSS 複製到剪貼簿
CSS 漸層的應用場景
- 網站背景：為網頁添加吸引人的漸層背景
- 按鈕設計：製作現代化的漸層按鈕效果
- 卡片設計：為內容卡片添加視覺深度
- 文字效果：結合 -webkit-background-clip 製作漸層文字
- 品牌色彩：快速生成品牌色系的漸層組合
- UI 元件：為頁首、側邊欄等UI元件提升視覺效果
常見問題
線性漸層和放射漸層有什麼區別？
線性漸層沿著一個方向均勻變化，適合背景、邊框等；放射漸層從中心點向外擴散，形成圓形或橢圓形效果，適合圓形按鈕、徽章等。
最多可以添加多少個色彩節點？
本工具最多支援 8 個色彩節點。如需更多節點，可手動編輯生成的 CSS 程式碼。
如何在 HTML 中使用生成的 CSS？
複製生成的程式碼後，可將其直接應用於元素的 style 屬性或 CSS 檔案中。例如：<div style="background: linear-gradient(...)"></div>
色彩節點的位置百分比代表什麼？
位置百分比表示該顏色在漸層中的起始點。0% 是起點，100% 是終點。中間值（如 50%）表示漸層的中間位置。
生成的漸層在所有瀏覽器中都能使用嗎？
CSS 漸層得到現代瀏覽器的廣泛支持。若需支援舊版 IE，工具會自動添加必要的前綴（如 -webkit-）。
可以使用透明顏色嗎？
可以。在拾色器中調整顏色時，可設定 Alpha 通道（透明度）來建立具有透明效果的漸層。