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 漸層產生器完全免費。無需註冊，無使用限制，所有產生的程式碼可在任何專案中使用，無需署名。
如何使用CSS 漸層產生器
用眼睛調配 CSS 漸層，即時複製可用於正式環境的程式碼。算繪在瀏覽器本地完成，不會上傳任何資料。
- 在 Type 中選擇漸層類型：linear-gradient 或 radial-gradient。
- 線性漸層設定 Angle 角度，徑向漸層則選擇 circle 或 ellipse 等 Shape 形狀。
- 在 Color Stops 區域新增色標、修改顏色並拖動位置。
- 點擊 Presets 中的任一預設色板，從現成配色開始調整。
- 複製產生的 CSS，貼到你的樣式表中。
把兩個不同顏色的色標放在同一位置可形成硬邊——不用圖片就能快速做出條紋背景。
相關工具
- CSS 陰影產生器 免費線上 CSS box-shadow 產生器。視覺化建立精美陰影，可調整偏移、模糊、擴展、顏色和內陰影。即時預覽，即時複製程式碼。
- CSS圓角產生器 視覺化CSS圓角產生器，獨立調整每個角的圓角半徑，即時預覽並立即複製產生的CSS程式碼。
- CSS Grid產生器 免費線上視覺化CSS Grid產生器，即時預覽。互動式建立響應式網格佈局，一鍵匯出可用的CSS程式碼。
- CSS Flexbox產生器 視覺化CSS Flexbox產生器,即時預覽。調整Flex屬性,即時取得可用的CSS程式碼。
- 創意圓角產生器 免費線上創意圓角產生器。拖曳 8 個控制點或選擇 blob 預設，快速建立有機 CSS 形狀並複製 border-radius 程式碼。
- 顏色轉換器 免費線上顏色轉換器。即時轉換 HEX、RGB、HSL、HSV 格式，附視覺化拾色器。100% 隱私保護，瀏覽器本地運行。
- CSS 緩動函數產生器 免費線上 CSS 緩動產生器。在互動曲線上拖曳 cubic-bezier 控制點，內建 18 種預設，小球循環動畫即時對比，一鍵複製 timing function。
- CSS 文字陰影產生器 免費線上 CSS text-shadow 產生器。多層陰影可調偏移、模糊、顏色與透明度，內建霓虹、3D、復古、光暈等預設，即時預覽並一鍵複製程式碼。