建立線性或徑向漸層，可調角度與色標，並輸出乾淨的 CSS。
色標 1
色標 2
色標 3
建立線性或徑向漸層，調整角度、三個色標與位置，並輸出可直接貼進樣式檔的 CSS。
支援 linear 與 radial 兩種漸層類型，修改任一色標時會同步更新預覽。
可為每個色標設定 HEX 顏色與 0-100% 位置，快速試出品牌或活動主視覺。
會產生乾淨的 `background` CSS，方便直接複製或下載為 `.css` 檔。
線性漸層
linear, 125deg, #22d3ee 0%, #3b82f6 52%, #0f172a 100%
徑向漸層
radial, #67e8f9 0%, #8b5cf6 54%, #0f172a 100%
品牌樣式
linear, 90deg, #14b8a6 0%, #0f766e 45%, #042f2e 100%
background 值
linear-gradient(125deg, #22d3ee 0%, #3b82f6 52%, #0f172a 100%)
CSS 片段
background: linear-gradient(125deg, #22d3ee 0%, #3b82f6 52%, #0f172a 100%);
下載檔案內容
.gradient-bg {
background: radial-gradient(circle, #67e8f9 0%, #8b5cf6 54%, #0f172a 100%);
}色標位置順序混亂，導致過渡不自然
把位置依 0 到 100 排序，避免中間色標超前或重疊。
線性漸層忘了調整角度
先決定視覺流向，再用角度滑桿微調。
直接把測試漸層貼進正式樣式
先確認前景文字對比度與品牌規範，再套用到正式頁面。
CSS 漸層產生器適合快速定稿背景樣式；正式上線前仍應在真實版面中驗證對比、壓縮與品牌一致性。
可以做多於三個色標嗎？
目前輸入介面固定三個色標；若需要更多停靠點，可複製輸出後手動延伸。
linear 與 radial 何時使用？
背景需要明顯方向性時用 linear；要做聚光或中心擴散感時用 radial。
工具會幫我檢查文字可讀性嗎？
不會，請另外確認漸層與前景文字、按鈕之間的對比度。