隨機漸層產生器
隨機產生雙色或三色 CSS 線性漸層，自訂 HEX 色碼與角度，即時預覽並複製或下載 CSS。
請選擇 0° 到 360° 的整數。0° 代表向上，90° 代表向右。
重新產生顏色時會保留目前角度。修改顏色或角度後，預覽與 CSS 會立即更新。
漸層預覽
CSS 背景程式碼
.gradient {
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
}如何產生隨機 CSS 漸層
- 選擇雙色或三色漸層，並設定 0° 到 360° 的角度。
- 產生隨機顏色、使用選色器，或輸入自訂的 3 位或 6 位 HEX 色碼。
- 確認背景預覽後，複製 CSS 或下載 random-gradient.css，並將 gradient 類別套用至 HTML 元素。
網站背景應用範例
- 以藍色與紫色雙色漸層設計品牌形象網站的主視覺。
- 嘗試三色漸層，用於簡報卡片、儀表板頁首或作品集區塊。
- 保留品牌色碼，調整角度來比較不同方向的背景效果。
常見問題
隨機產生後還能修改漸層嗎？
可以。使用文字欄位或選色器修改各個 HEX 色碼，再調整角度。預覽與 CSS 會同步使用目前設定。
支援哪些色碼格式和漸層類型？
本工具產生不透明的 CSS 線性漸層，支援雙色或三色，色標位置平均分布。接受 3 位與 6 位 HEX 色碼，不支援透明度、放射漸層或自訂色標位置。
輸入無效的色碼或角度會怎樣？
畫面會顯示錯誤提示，並清除舊的預覽與 CSS。修正設定前，無法複製或下載，以免匯出與輸入不符的結果。
可以直接用在網站上嗎？
可以。將 .gradient 規則複製到樣式表，再於元素加上 class="gradient"。下載檔包含的規則與預覽區顯示的內容相同。
顏色產生與編輯都在你的瀏覽器內完成，工具不會將 HEX 色碼或產生的 CSS 傳送至伺服器。網站仍可能載入一般廣告與流量分析服務。
覺得這個工具好用嗎？分享給你的團隊一起加快流程。
如果覺得不錯，按 支持；需要改進也可以按 ，我們會優先調整。
按 Ctrl+D 將此工具加入書籤，快速回來使用。