什麼是 CSS 漸變產生器？
免費線上 CSS 漸變產生器。建立線性、徑向與圓錐漸變，即時預覽並產生對應 CSS 程式碼。
CSS 漸層是為網頁設計增加深度、氛圍與視覺趣味最有效的方式之一，且不需依賴外部圖片。一個精心挑選的漸層，能將平淡的背景轉化為精緻且具目的性的質感。CSS 漸層產生器讓建立漸層變得很直觀：選擇線性漸層或放射漸層、挑選色彩、調整角度或位置，即可複製立即可用的 CSS 程式碼。
線性漸層沿著直線過渡色彩。調整角度從 0 到 360 度——0deg 由下到上、90deg 由左到右、180deg 由上到下、270deg 由右到左。放射漸層則從中心點以圓形或橢圓形向外發散。使用水平與垂直滑桿定位中心點，因此漸層可以從任何角落或邊緣發散，而非侷限於預設的中心。
兩種漸層類型都支援 2 到 3 個色彩停止點。每個停止點都有自己的色彩選擇器，讓您能微調過渡中的每個顏色。即時預覽會在您調整任何參數時更新，提供即時的視覺回饋。內建六個預設漸層作為起點——點擊一個即可載入編輯器，再自訂色彩與角度以符合您的設計。
複製的 CSS 程式碼可直接用於正式環境。它使用標準的 linear-gradient() 或 radial-gradient() 語法，並在需要時加上供應商前綴，因此可在 Chrome、Firefox、Safari 與 Edge 中運作。直接將它貼到樣式表的 background 或 background-image 屬性即可。無需清理或修改——程式碼格式整潔，可立即使用。
漸層的用途不限於簡單的背景。可用於覆蓋效果——將半透明的漸層覆蓋於主視覺圖片之上，透過加深邊緣同時保持中心較亮，可提升文字可讀性。建立進度列填滿效果，讓色彩從您的品牌色過渡到互補色調，以表示完成程度。結合漸層背景與 CSS background-clip 的透明內部區域，可設計出帶有微妙漸層邊框的卡片元件。而對於現代玻璃擬態效果，將半透明的漸層疊加於模糊背景之上——漸層為原本平坦的霧面玻璃面板增添深度。