CSS 漸層產生器
使用此免費線上工具輕鬆製作漂亮的 CSS 漸層。支援線性與放射狀漸層、多個顏色斷點以及角度調整。
CSS 漸層產生器
使用此免費線上工具輕鬆製作漂亮的 CSS 漸層。支援線性與放射狀漸層、多個顏色斷點以及角度調整。
關於 CSS 漸層
輸出標準 background 宣告
線性漸層會使用您選擇的角度，放射狀漸層會使用 circle 或 ellipse 形狀。複製結果是一行 background 宣告，可以直接貼進樣式表。
顏色斷點會依位置排序
您可以新增多個顏色斷點、選擇每個顏色，並將位置設在 0 到 100 percent 之間。產生的 CSS 會先依位置排序再合併斷點，讓漸層宣告保持可預期。
三色背景：藍、紫、粉紅
選擇線性漸層與 90°，依序設定 #2563eb 在 0%、#7c3aed 在 50%、#ec4899 在 100%。顏色由左往右變化；移動中間斷點可改變紫色出現的位置。將這行宣告貼入橫幅或卡片的 CSS 規則： background: linear-gradient(90deg, #2563eb 0%, #7c3aed 50%, #ec4899 100%);
放射光暈：由亮色中心過渡至深色背景
選擇放射狀漸層與 circle，設定 #fef3c7 在 0%、#f59e0b 在 35%、#0f172a 在 100%。這是中心發亮的不透明背景，不是透明疊圖。移動琥珀色斷點可調整過渡；改選 ellipse 可讓形狀隨容器長寬延展： background: radial-gradient(circle, #fef3c7 0%, #f59e0b 35%, #0f172a 100%);
硬邊分色：兩個斷點設在相同位置
選擇線性漸層與 90°，保留兩個斷點並依此順序設定：#0f172a 在 50%，接著 #f8fafc 也在 50%。相同位置會取消兩色間的漸變，形成左右清楚的分界。兩個斷點一起移到 30% 即為 30／70 分色。這是單一道分界，不是重複條紋： background: linear-gradient(90deg, #0f172a 50%, #f8fafc 50%);
常見問題
關於這個主題的常見疑問與實用解答。
支援哪些漸層類型？
支援線性與放射狀漸層，可完全控制角度、形狀與顏色斷點位置。
可以新增多個顏色斷點嗎？
可以，可新增任意數量的顏色斷點並自訂位置，創造複雜的漸層效果。
產生的程式碼跨瀏覽器相容嗎？
是的，輸出標準 CSS 漸層語法，適用於所有現代瀏覽器。
我的資料會被傳送到伺服器嗎？
不會，漸層 CSS 生成完全在您的瀏覽器中進行。您的顏色選擇與設定在本地處理，不會傳送至任何伺服器。