CSS 漸層產生器

以視覺化方式設計背景漸層，並複製可直接使用的 CSS。沿著漸層條拖曳色標、點一下漸層條新增色標、調整角度或中心點，還能讓顏色變透明。程式碼內含給舊版瀏覽器使用的純色備用色。

類型形狀

重複

角度°

中心 X%

中心 Y%

色標拖曳色標可移動它；點一下漸層條可新增色標。

顏色

不透明度%

位置%

預設組合

CSS

線性、放射狀與圓錐漸層有什麼差別？
線性漸層會沿著依所選角度的直線改變顏色。放射狀漸層從中心向外以圓形或橢圓形擴散。圓錐漸層像時鐘的指針一樣繞著中心旋轉，很適合用來製作色輪與圓餅圖。

CSS 漸層在所有瀏覽器都能用嗎？
可以。線性、放射狀與圓錐漸層在 Chrome、Edge、Firefox 與 Safari 的所有目前版本中，不需要前綴就能使用。background 的第一行是純色，只有非常舊的瀏覽器才會用到。

要怎麼做出條紋？
在每條條紋的起點與終點各放一個相同顏色的色標，讓顏色突然切換而不是漸漸混合，然後開啟「重複」。最後一個預設組合就是範例。