CSS 漸層產生器

建立具有多個色彩節點的線性、放射狀與圓錐狀 CSS 漸層，並複製程式碼。

預覽

CSS 輸出

background: —;

所有處理都在你的瀏覽器中執行 — 不需上傳、不需註冊。

漸層類型

角度

deg

色彩節點點擊色條以新增節點，拖曳以移動

選取的節點

節點顏色

不透明度 100%

位置

預設

關於 CSS 漸層產生器

CSS 漸層產生器可打造線性、放射狀與圓錐漸層，並提供完整的視覺化控制。點擊漸層條來新增色標，拖曳它們以重新定位，並為每個色標設定各自的顏色、不透明度與位置。線性漸層有角度控制；放射狀漸層有形狀（圓形或橢圓形）與位置；圓錐漸層則有起始角度。

即時預覽會準確顯示瀏覽器將渲染的結果，隨機按鈕與一組精選預設則能在你需要起點而非空白畫布時派上用場。色標可以自由新增與移除——漸層只需至少兩個色標即可。

畫面滿意後，複製純粹的漸層值或完整的 CSS 規則。這個產生器完全在你的瀏覽器中運作，無需上傳、無需註冊，是製作按鈕、主視覺背景、邊框與文字效果的便利夥伴。

線性漸層沿著一個角度的直線混合顏色。放射狀漸層從中心點以圓形或橢圓形向外擴散。圓錐漸層則繞著中心點掃過各種顏色——這正是圓餅圖與色輪背後的類型。

至少兩個，沒有實際的上限。兩三個色標能做出乾淨的背景；緊密排列的色標則會形成明顯的色帶，這正是條紋與分段效果的做法。

可以——每個色標都有自己的不透明度控制。將色標設為 0% 不透明度會讓漸層淡出，這是將帶色疊層融入照片、或讓主視覺區塊淡入頁面背景的標準做法。

無法直接做到——瀏覽器無法在漸層值之間進行過渡。常見的技巧包括：在放大的漸層上為 background-position 做動畫、使用自訂屬性旋轉圓錐漸層，或讓兩個疊層元素交叉淡出。

是的，免費且無限制使用。它完全在你的瀏覽器中運作，因此你設計的任何內容都不會被儲存或傳輸。