CSS 漸層產生器
以視覺化方式建立線性或放射狀 CSS 漸層，並直接在瀏覽器中複製可用的 CSS。
🔒 在你的瀏覽器本機處理
載入中…
使用方法
- 選擇「線性」或「放射狀」作為漸層類型。若為線性漸層，可拖曳滑桿或直接輸入數值來設定角度（度）。
- 每個色標都有一個色票與位置（0-100%）。點擊色票以挑選顏色，或輸入位置數值來移動該色標在漸層中的位置。
- 使用「新增色標」最多可加入 5 個色標，或點擊某色標旁的「移除」將其刪除（至少需保留 2 個色標）。
- CSS 輸出上方的預覽方塊會隨您調整任何控制項即時更新，無需按任何按鈕。
- 點擊「複製」即可複製產生的 CSS 宣告，可直接貼入您的樣式表。
功能特色
- 支援線性（可調角度）與放射狀漸層
- 最多 5 個色標，各自擁有獨立的顏色與位置
- 即時預覽方塊，隨任何控制項調整立即更新
- 一鍵複製可直接貼上的 CSS 宣告
- 100% 在裝置端執行——您的漸層資料永遠不會離開瀏覽器
常見問題
這個工具會把我的漸層資料傳到任何地方嗎？
不會。漸層的建立與預覽完全透過本機 JavaScript 與 CSS 完成——絕不會上傳或傳送到任何伺服器。
最多可以加入幾個色標？
最多 5 個。由於漸層至少需要 2 個色標才有意義，因此當只剩 2 個色標時，「移除」按鈕會被停用。
角度設定對放射狀漸層有作用嗎？
沒有。此工具中的放射狀漸層永遠以圓形從中心向外擴散，因此角度設定僅適用於線性漸層。
如果兩個色標的位置相同會怎樣？
這是允許的，且可刻意用來製造清晰的顏色分界，而非平滑漸變——兩個色標都會保留在產生的 CSS 中。
可以直接把輸出結果貼到我的 CSS 檔案嗎？
可以。輸出方塊會顯示完整的 `background: ...;` 宣告，您可以直接貼入樣式表或行內樣式中使用。