CSS 漸層產生器

此 CSS 漸層產生器會根據你控制的顏色停止建立線性和徑向漸層，並具有即時預覽和可立即貼上的背景聲明。沿著欄位拖曳停止點，設定角度或形狀，CSS 就會立即更新。

一切都根據你選擇的顏色和設定在瀏覽器中執行，因此不會上傳任何內容，你可以複製結果並離線使用。

線性漸層沿直線混合顏色，角度設定其方向：0 度指向上方，90 度指向右側，180 度指向下方。徑向漸層從中心向外混合，形成圓形或橢圓形。

兩者都是標準 CSS 值，寫為 Linear-gradient() 和 Radial-gradient()，並且都使用相同的色標列表，因此切換類型會保留顏色，只會改變它們的傳播方式。

每個色標是放置在 0% 到 100% 位置的顏色。相鄰停止點之間的漸層會平滑地混合，因此停止點的位置控制其顏色峰值的位置以及淡入下一停止點的速度。

根據需要新增任意多個停止點以建立多顏色漸層，拖曳它們以微調混合，或按一下欄以將新停止點放置在你想要的位置。漸層至少需要兩站。

複製產生的程式碼並將其貼上為任何元素（例如部分、卡片或按鈕）的背景。現代瀏覽器支援線性漸層和徑向漸層，無需供應商前綴，因此該值按原樣工作。

因為漸層只是一個值，所以你也可以在任何需要背景影像的地方使用它，將其分層在純色上作為後備，或者線上上性和徑向版本中重複使用相同的停止點以獲得一致的外觀。