漸變生成器
在線CSS漸變生成工具，創建線性漸變、徑向漸變，可視化調整並一鍵複製代碼
預覽
設置
顏色停止點
0%
100%
預設模板
CSS 代碼
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);什麼是CSS漸變？
CSS漸變（Gradient）是一種在兩個或多個顏色之間平滑過渡的效果。線性漸變沿著直線方向過渡，徑向漸變從中心點向外擴散過渡。漸變可以用於背景、按鈕、卡片等元素，提升視覺效果。
使用方法
- 選擇漸變類型：線性漸變或徑向漸變
- 添加顏色停止點，調整每個顏色的位置
- 線性漸變可設置角度方向，徑向漸變可設置中心位置
- 實時預覽漸變效果
- 點擊「複製代碼」獲取CSS代碼
- 選擇預設模板快速應用常見漸變
常見用途
- 網頁背景：為頁面或區塊添加漸變背景
- 按鈕樣式：創建漸變按鈕，提升視覺吸引力
- 卡片裝飾：為卡片添加漸變邊框或背景
- 品牌配色：使用品牌色創建漸變效果
- UI設計：快速生成漸變原型供設計參考
常見問題 (FAQ)
Q: 線性漸變和徑向漸變有什麼區別？
A: 線性漸變沿著指定角度的直線方向過渡顏色；徑向漸變從中心點向外擴散過渡，類似圓形擴散效果。
Q: 顏色停止點的位置是什麼意思？
A: 位置百分比表示顏色在漸變中出現的位置，0% 是起點，100% 是終點。例如兩個顏色分別在 0% 和 50%，則前半段是第一個顏色到第二個顏色的過渡。
Q: 如何創建多色漸變？
A: 點擊「添加顏色」按鈕添加更多顏色停止點，每個顏色可以設置不同的位置，形成複雜的漸變效果。
Q: 生成的CSS代碼如何使用？
A: 複製代碼後，將其作為 background 或 background-image 屬性值應用到CSS樣式表中，例如：.element { background: linear-gradient(...); }