漸層產生器

📖 工具介紹

漸層產生器是一款專為前端與視覺設計師打造的線上 CSS 漸層創作工具，讓您用拖動色標的方式，直覺地拼出漂亮的線性漸層，並直接匯出可貼上使用的 linear-gradient 代碼。頁面最上方是一塊大尺寸即時預覽區，任何調整都會立刻反映在這塊區域；中間是角度控制器，用滑桿或數字框設定漸層方向；下方是一條色條，每個圓點代表一個色標，點擊即可選取，按住拖動即可改變它在漸層中的位置，選取後還能用取色器改顏色、用數字框精確定位百分比。色標可在 2 到 5 個之間自由增減，新增時自動插入到相鄰兩色標之間的中點，方便快速擴充。工具會依位置自動排序並產生標準 CSS3 敘述，所有插值由瀏覽器依標準色彩模型完成，確保輸出與預覽完全一致。全程離線執行，免註冊，打開即可創作。

✨ 功能特點

• 拖動色標：在色條上直接拖動圓點，位置即時跟隨，所見即所得
• 角度自由：0–360° 任意方向，90° 橫向、180° 縱向，滑桿與數字框雙向同步
• 色標增刪：2–5 個色標彈性組合，新增自動取相鄰中點，刪除自動保護至少兩個
• 精確位置：每個色標可用百分比數字框精確定位，誤差為零
• 標準代碼匯出：產生規範的 linear-gradient 敘述，附帶 background 屬性，複製即用
• 一鍵範例與下載：內建多色範例快速體驗，代碼可儲存為 .css 檔案歸檔

📝 使用方式

1. 拖動角度滑桿，或在數字框輸入 0–360 的度數，設定漸層方向
2. 點擊色條上的圓點選取某個色標，被選取的圓點會高亮放大
3. 用取色器改該色標的顏色，或用百分比數字框微調位置
4. 需要更多顏色時點「新增色標」，多餘時點「刪除色標」
5. 滿意後點「複製代碼」把 linear-gradient 敘述貼上到專案，或「下載 CSS」儲存

⚠️ 注意事項

• 色標數量：至少 2 個、最多 5 個色標，超出範圍會給出友善提示
• 位置排序：色標在代碼中會依位置由小到大自動排列，不必手動排序
• 角度週期：角度以 360° 為週期自動正規化，輸入 400° 會換算為 40°
• 本機運算：漸層渲染與代碼產生皆在瀏覽器完成，不發送任何網路請求
• 相容性：linear-gradient 為現代瀏覽器標準語法，極舊核心請自行加前綴