開發者 / CSS
CSS漸層產生器
設計線性、放射狀或圓錐形漸層，提供即時預覽、任意數量的色標與預設樣式，完成後即可複製CSS。
CSS漸層產生器: 這個產生器會寫出瀏覽器製作您所見漸層所需的background宣告：帶有角度的linear-gradient、以中心為起點的圓形或橢圓形radial-gradient，或從起始角度繞行的conic-gradient；每種漸層都會依序列出色標。第一行會先放入純色，作為太舊而無法繪製漸層的瀏覽器之備援。新增顏色時，系統會在最寬的間隔中加入一個由相鄰顏色混合而成的顏色，讓漸層不會突然跳變。 全程在瀏覽器中於本機執行，檔案不會上傳至伺服器。
- 分類
- 開發者工具
- 使用次數
- 在瀏覽器中
- 費用
- 免費・免註冊
- 可用狀態
- 可立即使用
全程在瀏覽器中執行
CSS
background: #ff7e5f; background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
第一行是提供給非常舊版瀏覽器使用的純色；目前的瀏覽器都會使用第二行的漸層。
預設
看起來平滑的漸層
兩種差異很大的色相之間混合時，例如從藍色到黃色，中間會經過暗淡的灰色。在中間加入一個更明亮的色標，可以讓漸層保持活潑。相鄰色相之間的漸層，例如從橘色到粉紅色，通常不需要額外調整。
漸層上的文字
確認文字在漸層的兩端都保持易讀，不要只檢查中間。深色漸層搭配白色文字，或在深色文字後方使用細緻的漸層，都比明亮的彩虹漸層更安全。
使用方式
- 選擇預設樣式，或選擇線性、放射狀或圓錐形漸層。
- 設定角度並調整顏色及其位置；新增顏色即可加入更多色標。
- 將CSS複製到您的樣式表中。
隱私與限制
所有內容都在瀏覽器中執行；您最後使用的漸層只會保留在這個瀏覽器中。
相關工具
常見問題
線性漸層中的角度代表什麼？
0deg代表從下往上，90deg代表從左往右，180deg代表從上往下，270deg代表從右往左。漸層會沿著該方向繪製，因此135deg會從左上角延伸到右下角。
什麼是色標？
色標是某個顏色，以及漸層中從0%到100%的位置，代表該位置會完整呈現這個顏色。兩個色標之間的顏色會混合；將兩個色標放在相同位置，會形成硬邊而不是混合效果，這就是製作條紋的方法。
圓錐形漸層和放射狀漸層有什麼不同？
放射狀漸層會從中心向外以環狀方式變換顏色。圓錐形漸層則會繞著中心變換顏色，就像時鐘指針一樣，適合用來製作色輪和圓餅圖。
現在還需要使用-webkit-前綴嗎？
不需要。所有目前的瀏覽器都能在沒有前綴的情況下支援linear-gradient和radial-gradient，而conic-gradient自2021年起也已在所有這些瀏覽器中運作。第一行的備援色只供年代久遠的瀏覽器使用。
免費工具・使用在瀏覽器中次・免註冊