CSS漸變生成器
只需新增兩個或更多顏色節點，即可即時預覽並生成linear-gradient或radial-gradient的CSS程式碼。可自由調整角度和節點位置，生成的程式碼一鍵複製即可使用。
什麼是 CSS 漸層
CSS 漸層是不借助影像、僅憑樣式表便繪出由兩種以上顏色平滑相接的色帶或放射狀紋樣的機制。linear-gradient() 沿所指定的角度作直線式的色彩推移，radial-gradient() 則自中心向外畫圓般擴散。因可用文字書寫而輕量，放大也不會變粗糙，想改顏色時只需改寫數值即可。
本工具可一面在畫面上調整種類、角度與色標，一面當場確認結果，並把產生的 CSS 直接複製。色標最多可放6個，各自指定顏色與位置（%）。少於2個便不成其為漸層，會給出錯誤提示。另需注意角度採用 CSS 獨有的取法：0deg 為自下而上，90deg 為自左而右，與數學所用角度的零點方向不同。圓形（radial）沒有角度的概念，故角度的指定不起作用。
CSS 漸層的製作方式
- 選擇種類 想讓顏色作直線變化請選線性（linear），想自中心放射狀擴散請選圓形（radial）。
- 決定角度 僅在線性時有效。0deg 為自下而上，90deg 為自左而右，按順時針遞增。可拖動滑桿一邊調整一邊確認方向。
- 放置色標 用「新增顏色」最多可增至6個。為各色標指定顏色與位置（%），即可細緻地操控顏色切換之處。
- 以預覽確認 每次更改設定預覽都會重繪，可當場判斷色彩的交界是否過於生硬、方向是否合乎所想。
-
複製 CSS
按「複製 CSS」即放入剪貼簿，可直接貼到樣式表的
background中。
用好本工具的小技巧
- 最多可新增6個顏色節點，自由調整每個節點的顏色和位置（%），從而製作出複雜的多色漸變效果。
- 線性漸變中，0度表示從下到上變化，90度表示從左到右變化，拖動滑塊即可直觀調整角度。
- 徑向漸變沒有角度的概念，顏色會以圓形方式從中心向外擴散。
- 點選“複製CSS”按鈕，即可將生成的程式碼複製到剪貼簿，直接貼上到樣式表中使用。
與 CSS 漸層相關的用語
- linear-gradient
- 指繪製沿所指定角度作直線式色彩推移之漸層的 CSS 函式。適合帶狀背景與按鈕的填充。
- radial-gradient
- 指繪製自中心點向外作圓形或橢圓形擴散之漸層的 CSS 函式，不具備角度的概念。
- 色標（color stop）
- 指在漸層途中放置的「此處用此色」的指定。位置以起點為0%、終點為100%的比例表示。
- 角度（deg）
- 指 linear-gradient 中顏色推移的方向。CSS 中 0deg 為自下而上，90deg 為自左而右，按順時針遞增，與數學一般所用角度的零點方向不同。
- 瀏覽器前綴
- 指如
-webkit-這般，在標準化之前各瀏覽器各自提供功能時所加的前綴。漸層已完成標準化，故現今不再需要。 - background 屬性
- 指用以指定元素背景的 CSS 屬性。漸層被視作背景影像的一種，故寫於此處。
常見問題
閒話 ― CSS漸變為何取代了漸變圖片
在CSS3出現之前，網頁上的漸變背景通常是用影像編輯軟體製作成PNG或JPEG圖片後作為背景使用的。但這種方法存在不少問題：額外的圖片請求會拖慢頁面載入速度，在響應式佈局中放大後畫質會變得模糊，而僅僅想修改一種顏色也需要重新匯出整張圖片。
2010年代初期，瀏覽器陸續實現了linear-gradient和radial-gradient語法後，這些問題基本得到了解決。由於漸變完全用文本描述，檔案體積輕量，無論放大縮小畫質都不會劣化，修改顏色也只需編輯樣式表中的幾個數值即可完成。
早期實現中，不同瀏覽器需要不同的廠商字首（-webkit-、-moz-、-o-等）且語法略有差異，開發者不得不為同一條規則編寫多個帶字首的版本。如今隨著W3C完成標準化，無字首的標準寫法已經可以在所有主流瀏覽器中穩定執行。