CSS 漸層生成
視覺化產生 CSS linear / radial 漸層並複製程式碼。
90°
0%
100%
CSS
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
隱私安全全部在瀏覽器本機完成，資料不上傳
簡單易用貼上或輸入即可，結果即時呈現
永久免費不限次數，無需註冊
快速高效先進技術，處理高效穩定
CSS 漸層容易想像，手寫卻很煩瑣，要顧及色標、角度和正確語法。視覺化設定好顏色，即可得到乾淨的 linear 或 radial 漸層代碼，直接貼進你的樣式表。
使用步驟: CSS 漸層生成
- 1輸入內容選擇漸層類型：線性或放射狀。
- 2設定選項設定每個色彩節點的顏色與位置，並視需要新增更多節點。
- 3開始處理為線性漸層調整角度，並觀察即時預覽。
- 4取得結果點選「複製 CSS」，取得可直接使用的漸層程式碼。
常見用途
做一個背景設計一個線性或徑向漸層，複製出 CSS。
調整色標拖動色標，控制每個色調落在什麼位置。
切換方向為線性漸層設角度，或為徑向漸層設中心點。
複用漸層代碼複製一次，就能貼到專案各處。
使用提示
線性和徑向不同線性漸層沿一條帶角度的線展開，徑向漸層從一個中心點向外擴散。挑與你想要的形狀相符的那一種。
色標控制過渡每個色標放在哪裡，決定了一個色調多快變成下一個。色標越近，過渡越銳利。
現在很少需要前綴現代瀏覽器都支援無前綴的漸層寫法，因此舊的廠商前綴通常沒必要。只有面向很老的環境時才加。
留意色帶平滑漸層在某些螢幕上會出現可見的條帶，尤其是長距離、很微妙的過渡。加一點雜訊或縮短範圍會有幫助。