CSS漸變生成器
只需新增兩個或更多顏色節點，即可即時預覽並生成linear-gradient或radial-gradient的CSS程式碼。可自由調整角度和節點位置，生成的程式碼一鍵複製即可使用。
使用提示
- 最多可新增6個顏色節點，自由調整每個節點的顏色和位置（%），從而製作出複雜的多色漸變效果。
- 線性漸變中，0度表示從下到上變化，90度表示從左到右變化，拖動滑塊即可直觀調整角度。
- 徑向漸變沒有角度的概念，顏色會以圓形方式從中心向外擴散。
- 點選“複製CSS”按鈕，即可將生成的程式碼複製到剪貼簿，直接貼上到樣式表中使用。
常見問題
linear-gradient沿指定的角度以直線方式過渡顏色，常用於按鈕或條狀背景設計。而radial-gradient從中心點以圓形或橢圓形向外擴散顏色，適合表現聚光燈效果或立體感。
在CSS的linear-gradient()中，角度以度（deg）為單位指定。0deg表示從下到上，90deg表示從左到右，180deg表示從上到下。需要注意的是CSS的角度是按順時針方向計算的，這與數學上0度指向右側的常規定義不同。
顏色節點的位置表示該顏色在漸變起點（0%）到終點（100%）之間所處的位置。通過調整位置的分佈，可以讓顏色在某些區域變化得平緩，在另一些區域變化得急促。
linear-gradient和radial-gradient在Chrome、Firefox、Safari、Edge等所有主流瀏覽器中均可直接使用，無需新增瀏覽器字首，甚至可追溯到IE10。除非需要相容非常老舊的移動端瀏覽器，否則無需額外處理。
閒話 ― CSS漸變為何取代了漸變圖片
在CSS3出現之前，網頁上的漸變背景通常是用影像編輯軟體製作成PNG或JPEG圖片後作為背景使用的。但這種方法存在不少問題：額外的圖片請求會拖慢頁面載入速度，在響應式佈局中放大後畫質會變得模糊，而僅僅想修改一種顏色也需要重新匯出整張圖片。
2010年代初期，瀏覽器陸續實現了linear-gradient和radial-gradient語法後，這些問題基本得到了解決。由於漸變完全用文本描述，檔案體積輕量，無論放大縮小畫質都不會劣化，修改顏色也只需編輯樣式表中的幾個數值即可完成。
早期實現中，不同瀏覽器需要不同的廠商字首（-webkit-、-moz-、-o-等）且語法略有差異，開發者不得不為同一條規則編寫多個帶字首的版本。如今隨著W3C完成標準化，無字首的標準寫法已經可以在所有主流瀏覽器中穩定執行。