漸層產生器
免費線上CSS漸層產生器，支援顏色選擇器、角度調節、15種預設漸層。即時預覽效果，一鍵複製代碼，快速應用到網站設計中。
漸層產生器
起始顏色
結束顏色
角度
預覽
CSS代碼
background: linear-gradient(135deg, #667eea, #764ba2);預設漸層
什麼是漸層產生器？
漸層產生器是一款線上CSS漸層建立工具，可以在兩種顏色之間創建平滑的顏色過渡效果。它能夠即時生成精美的漸層CSS代碼，可應用於網站背景、按鈕、卡片、橫幅等各種UI元素。
選擇起始顏色和結束顏色，調整角度，即可立即在預覽區域查看效果。生成的CSS代碼可一鍵複製，直接應用到您的專案中。透過15種熱門預設和隨機生成功能，激發您的設計靈感。
適用情境
- 網站背景設計 – 用精美的漸層效果取代單調的純色背景，提升網站的視覺吸引力。
- 按鈕樣式設計 – 為CTA（行動呼籲）按鈕添加漸層效果，提高點擊率，吸引使用者注意力。
- 卡片UI設計 – 為個人資料卡、產品卡、資訊卡的背景或邊框添加漸層，營造高級感。
- 橫幅/首屏區域 – 在著陸頁首屏區域和促銷橫幅上應用醒目的漸層背景。
- 文字特效 – 結合CSS的background-clip屬性，為文字添加漸層效果。
- 社群媒體內容 – 作為Facebook、Instagram等社群媒體圖片的背景使用。
主要功能
- 即時預覽 – 更改顏色或角度時，立即查看漸層效果。無需點擊任何按鈕，即時反映變化。
- 顏色選擇器 + HEX輸入 – 同時支援視覺化顏色選擇器和直接輸入HEX代碼。輕鬆應用設計稿中的精確顏色。
- 360度角度調節 – 透過滑桿或直接輸入，精確調整0°到360°的角度。預設按鈕可快速選擇常用角度。
- 顏色交換功能 – 一鍵交換起始顏色和結束顏色的位置，輕鬆反轉漸層方向。
- 隨機生成 – 點擊一次按鈕，即可發現意想不到的美麗漸層組合。需要設計靈感時非常有用。
- 15種預設 – 提供Sunset、Ocean、Mint、Pink等流行且經過驗證的漸層組合。一鍵即可套用。
- 一鍵複製CSS – 將生成的CSS代碼複製到剪貼簿，直接貼上到樣式表中。
- 自動儲存 – 上次使用的漸層設定會自動儲存到瀏覽器，下次造訪時可繼續之前的工作。
使用方法
- 選擇起始顏色 – 點擊左側的顏色選擇器選擇漸層的起始顏色，或直接輸入HEX代碼（例如：#FF5733）。
- 選擇結束顏色 – 用同樣的方式選擇漸層的結束顏色。選擇色調相近的顏色，兩種顏色之間的過渡會更自然。
- 調整角度 – 移動滑桿或輸入數值來調整漸層方向。90°是從左到右，180°是從上到下。
- 查看預覽 – 在右側預覽區域即時查看效果。調整顏色和角度，直到滿意為止。
- 複製CSS代碼 – 點擊底部的「複製」按鈕，將生成的CSS代碼複製到剪貼簿，然後貼上到專案的CSS檔案中。
CSS漸層詳解
什麼是線性漸層？
線性漸層（Linear Gradient）是CSS中最常用的漸層類型。它沿著一條直線在兩種或多種顏色之間創建漸進的過渡效果。在網頁設計中，它被廣泛用於背景、按鈕、遮罩等各種場景。
- 語法：
linear-gradient(angle, color1, color2) - 優點： 所有主流瀏覽器都支援，可以用純CSS實現視覺效果，無需圖片檔案。
- 效能： 比圖片檔案小，渲染速度更快。
理解漸層角度
角度決定了漸層的方向。在CSS中，角度從0°開始指向上方（12點鐘方向），順時針遞增。
- 0°（to top）： 從下往上漸變
- 45°： 從左下往右上漸變
- 90°（to right）： 從左往右漸變
- 135°： 從左上往右下漸變（最常用的角度）
- 180°（to bottom）： 從上往下漸變
- 270°（to left）： 從右往左漸變
顏色搭配技巧
以下是創建美麗漸層的顏色選擇指南：
- 鄰近色搭配： 色輪上相鄰的顏色（如藍→紫、黃→橙）能產生自然的過渡效果。
- 明度變化： 使用同一顏色的淺色和深色版本，可以營造簡潔優雅的效果。
- 避免互補色： 色輪上正對面的顏色（互補色）可能在中間產生灰暗的顏色，最好避免使用。
- 流行搭配： 紫-粉、藍-青、橙-粉系配色是當前網頁設計的流行趨勢。
瀏覽器支援
linear-gradient在所有現代瀏覽器中都得到完全支援：
- Chrome 26+（2013年起）
- Firefox 16+（2012年起）
- Safari 6.1+（2013年起）
- Edge 12+（2015年起）
- Opera 12.1+（2012年起）
- iOS Safari 7+（2013年起）
- Android瀏覽器 4.4+（2013年起）
不再需要-webkit-等供應商前綴，標準語法即可涵蓋絕大多數使用者。
實用技巧
- 漸層背景 + 疊加文字： 在深色漸層背景上放置淺色文字，可讀性高且視覺效果出眾。
- 半透明漸層： 為顏色添加透明度（使用rgba），可將漸層作為圖片上的疊加層使用。
- 漸層邊框： 結合
border-image屬性，可以創建漸層邊框。 - 動畫效果： 使用CSS動畫改變漸層的角度或顏色，創建動態背景效果。
常見問題
支援徑向（圓形）漸層嗎？
目前版本僅支援線性漸層。線性漸層是網頁設計中最常用的類型，我們簡潔直覺的介面可以幫助您快速得到結果。
可以創建三種以上顏色的漸層嗎？
本工具針對雙色漸層進行了最佳化。雙色漸層最為簡潔實用，能滿足大多數設計需求。如需多色漸層，可以在生成的CSS代碼基礎上手動新增顏色停止點。
如何使用生成的CSS代碼？
點擊「複製」按鈕將CSS代碼複製到剪貼簿。然後將代碼貼上到CSS檔案或HTML的style屬性中即可。例如：.my-element { background: linear-gradient(...); }。
手機上可以使用嗎？
可以，在行動裝置瀏覽器上也能完美運作。採用響應式設計，在智慧型手機和平板電腦上也可以使用顏色選擇、角度調整、代碼複製等全部功能。
可以儲存創建的漸層嗎？
上次使用的漸層設定（起始顏色、結束顏色、角度）會自動儲存到瀏覽器的本機儲存中。下次造訪頁面時，之前的設定會自動載入。無需帳號或登入。
漸層在舊版瀏覽器中能正常顯示嗎？
CSS linear-gradient在2012年以後發布的所有瀏覽器中都得到支援。在IE 10+、Chrome 26+、Firefox 16+中無需供應商前綴即可正常運作。全球99%以上的使用者都能正確查看漸層效果。