CSS 漸層完整教學：從線性到錐形漸層
CSS 漸層是現代網頁設計中最常用的視覺效果之一。它允許你在兩個或多個顏色之間創建平滑的過渡，無需使用圖片。本文將完整介紹 CSS 的三種漸層類型。
線性漸層（Linear Gradient）
linear-gradient() 是最常用的漸層類型，沿著一條直線創建顏色過渡。
基本語法：linear-gradient(direction, color-stop1, color-stop2, ...)
- 方向 — 可以使用角度（如
45deg）或關鍵字（如to right） - 色標 — 指定顏色及其位置（如
red 0%,blue 100%）
徑向漸層（Radial Gradient）
radial-gradient() 從中心點向外擴散，創建圓形或橢圓形的漸層效果。
基本語法：radial-gradient(shape size at position, color-stop1, color-stop2, ...)
| 參數 | 選項 | 說明 |
|---|---|---|
| 形狀 | circle, ellipse | 圓形或橢圓形 |
| 大小 | closest-side, farthest-corner 等 | 漸層的結束邊界 |
| 位置 | at center, at top left 等 | 漸層中心點 |
錐形漸層（Conic Gradient）
conic-gradient() 圍繞中心點旋轉創建漸層，類似色輪或圓餅圖的效果。
基本語法：conic-gradient(from angle at position, color-stop1, color-stop2, ...)
實用技巧：錐形漸層非常適合用來製作圓餅圖、色輪和進度環等視覺效果，無需使用 SVG 或 Canvas。
重複漸層
CSS 還提供了三種重複漸層函式：
repeating-linear-gradient()— 重複的線性漸層repeating-radial-gradient()— 重複的徑向漸層repeating-conic-gradient()— 重複的錐形漸層
重複漸層可以用來創建條紋、棋盤格等重複圖案。
多層漸層
CSS 允許在同一個元素上疊加多個漸層，用逗號分隔。結合透明度，可以創建豐富的視覺效果。
瀏覽器支援
CSS 漸層在所有現代瀏覽器中都有良好的支援。根據 Can I Use 的統計，全球超過 97% 的瀏覽器支援線性和徑向漸層，錐形漸層也已達到 95% 以上的支援率。
使用工具生成漸層
立即使用 CSS 漸層產生器 →結語
CSS 漸層是一個強大且靈活的視覺工具。掌握三種漸層類型的語法和應用場景，可以讓你的網頁設計更加豐富多彩。
參考文獻
- W3C. "CSS Images Module Level 3 — Gradients." W3C Candidate Recommendation. https://www.w3.org/TR/css-images-3/#gradients
- Mozilla Developer Network. "Using CSS gradients." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients
- W3C. "CSS Images Module Level 4." W3C Working Draft. https://www.w3.org/TR/css-images-4/