CSS 漸層產生器
視覺化建立精美 CSS 漸層。產生支援多色標、自訂角度和位置的線性、徑向和錐形漸層。即時複製可投入生產的 CSS 程式碼。
什麼是 CSS 漸層？
CSS 漸層是一種 CSS 影像值，可以在不使用影像檔案的情況下顯示兩種或多種顏色之間的平滑過渡。漸層由瀏覽器渲染，與解析度無關且效能極高。
支援哪些類型的 CSS 漸層？
本產生器支援三種類型：linear-gradient（顏色沿直線過渡）、radial-gradient（顏色從中心向外輻射）和 conic-gradient（顏色圍繞中心點旋轉，類似時鐘盘面）。
線性漸層和徑向漸層有什麼區別？
線性漸層沿由角度或方向關鍵字定義的直線過渡顏色。徑向漸層從中心點向外以圓形或橢圓形過渡顏色。
可以使用多少個色標？
可以使用任意數量的色標。每個色標定義一個顏色，可選擇指定沿漸層線的位置（0% 到 100%）。多個色標建立複雜的多色過渡。
如何使用產生的 CSS 程式碼？
複製產生的 CSS 程式碼，貼到 CSS 樣式表中 background 或 background-image 屬性的值即可。程式碼在所有現代瀏覽器中均可正常工作。
什麼是漸層中的色標？
色標在漸層線上的特定位置定義特定顏色。例如 "red 0%, blue 50%, green 100%" 建立一個從紅色開始、中點過渡到藍色、以綠色結束的漸層。
可以建立帶角度的漸層嗎？
可以，線性漸層支援 0deg 到 360deg 的角度值。也可以使用 "to right"、"to bottom"、"to top left" 等方向關鍵字表示常見角度。
CSS 漸層是響應式的嗎？
是的，CSS 漸層本質上是響應式的，因為它們是矢量的並由瀏覽器渲染。可以完美縮放到任何容器大小，不會遺失質量或增加檔案大小。
CSS 漸層會影響頁面效能嗎？
CSS 漸層通常效能很好。它們消除了影像檔案的 HTTP 請求，並支援硬體加速。但具有許多色標的極複雜漸層可能影響低階裝置的渲染效能。
可以在背景和邊框中使用漸層嗎？
可以，漸層可用於 background-image、border-image、mask-image 以及任何接受 CSS 影像值的屬性。在需要影像值的地方都可以使用。
哪些瀏覽器支援 CSS 漸層？
所有現代瀏覽器都支援 CSS 漸層，包括 Chrome、Firefox、Safari、Edge 和 Opera。自 IE10 以來支援一直很好，目前瀏覽器不再需要供應商前綴。
如何建立重複漸層？
使用 repeating-linear-gradient 或 repeating-radial-gradient 代替標準版本。它們重複漸層模式填充整個元素，建立條紋或圖案效果。
可以動畫化 CSS 漸層嗎？
CSS 漸層不能直接用 CSS 過渡動畫化。但可以動畫化 background-position、background-size，或使用 @property 的 CSS 自訂屬性建立漸層動畫效果。
這個漸層產生器是免費的嗎？
是的，這個 CSS 漸層產生器完全免費。無需註冊，無使用限制，所有產生的程式碼可在任何專案中使用，無需署名。