CSS 漸層指南：線性、放射狀與錐形圖案

CSS 漸層能在不使用圖片的情況下建立色彩之間的平滑過渡，帶來零 HTTP 請求、無限縮放和極小的檔案大小。現代 CSS 支援三種漸層類型，每種都有強大的配置選項。本指南涵蓋所有類型，並提供你可以立即使用的實用範例。

線性漸層

最常見的類型，沿著一條直線進行過渡：

/* 由上到下（預設） */
background: linear-gradient(#3B82F6, #8B5CF6);

/* 指定角度 */
background: linear-gradient(135deg, #3B82F6, #8B5CF6);

/* 使用方向關鍵字 */
background: linear-gradient(to right, #3B82F6, #8B5CF6);
background: linear-gradient(to bottom right, #3B82F6, #8B5CF6);

色標

控制每個顏色出現的位置：

/* 平均分布（預設） */
background: linear-gradient(#3B82F6, #8B5CF6, #EC4899);

/* 自訂位置 */
background: linear-gradient(#3B82F6 0%, #8B5CF6 30%, #EC4899 100%);

/* 硬切換（無過渡） */
background: linear-gradient(#3B82F6 50%, #8B5CF6 50%);

多色標漸層

建立複雜的色彩過渡：

/* 日落漸層 */
background: linear-gradient(
  to right,
  #1E3A5F 0%,
  #FF6B35 30%,
  #FFC947 50%,
  #FF6B35 70%,
  #1E3A5F 100%
);

/* 彩虹 */
background: linear-gradient(
  90deg,
  hsl(0, 100%, 50%),
  hsl(60, 100%, 50%),
  hsl(120, 100%, 50%),
  hsl(180, 100%, 50%),
  hsl(240, 100%, 50%),
  hsl(300, 100%, 50%),
  hsl(360, 100%, 50%)
);

使用我們的漸層產生器以視覺化方式建立線性漸層 — 即時調整顏色、角度和色標。

放射狀漸層

從中心點向外擴散：

/* 從中心開始的圓形 */
background: radial-gradient(circle, #3B82F6, #1E3A8A);

/* 橢圓形（預設形狀） */
background: radial-gradient(ellipse, #3B82F6, #1E3A8A);

/* 自訂位置 */
background: radial-gradient(circle at top left, #3B82F6, #1E3A8A);
background: radial-gradient(circle at 25% 75%, #3B82F6, #1E3A8A);

尺寸關鍵字

/* closest-side：漸層延伸到最近的邊 */
background: radial-gradient(circle closest-side at 25% 50%, #3B82F6, #1E3A8A);

/* farthest-corner：漸層延伸到最遠的角（預設） */
background: radial-gradient(circle farthest-corner, #3B82F6, #1E3A8A);

/* 明確指定尺寸 */
background: radial-gradient(circle 200px at center, #3B82F6, #1E3A8A);

錐形漸層

如同圓餅圖般圍繞中心點旋轉：

/* 基本錐形 */
background: conic-gradient(#3B82F6, #8B5CF6, #EC4899, #3B82F6);

/* 圓餅圖區段 */
background: conic-gradient(
  #3B82F6 0deg 120deg,
  #8B5CF6 120deg 240deg,
  #EC4899 240deg 360deg
);

/* 從特定角度開始 */
background: conic-gradient(from 45deg, #3B82F6, #8B5CF6, #3B82F6);

/* 自訂中心點 */
background: conic-gradient(from 0deg at 25% 50%, #3B82F6, #8B5CF6, #3B82F6);

重複漸層

三種類型都支援重複圖案：

/* 條紋圖案 */
background: repeating-linear-gradient(
  45deg,
  #3B82F6 0px,
  #3B82F6 10px,
  transparent 10px,
  transparent 20px
);

/* 同心圓環 */
background: repeating-radial-gradient(
  circle,
  #3B82F6 0px,
  #3B82F6 5px,
  #1E3A8A 5px,
  #1E3A8A 10px
);

/* 棋盤格（使用錐形） */
background: repeating-conic-gradient(
  #E5E7EB 0% 25%,
  #F9FAFB 0% 50%
);
background-size: 40px 40px;

疊加多個漸層

CSS 支援多重背景，能實現複雜效果：

/* 圖片上的漸層覆蓋 */
background:
  linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)),
  url('hero.jpg');

/* 交叉網格圖案 */
background:
  repeating-linear-gradient(
    0deg,
    transparent,
    transparent 35px,
    #3B82F620 35px,
    #3B82F620 36px
  ),
  repeating-linear-gradient(
    90deg,
    transparent,
    transparent 35px,
    #3B82F620 35px,
    #3B82F620 36px
  );

實用的 UI 模式

漸層文字

.gradient-text {
  background: linear-gradient(135deg, #3B82F6, #EC4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

漸層邊框

.gradient-border {
  border: 3px solid transparent;
  background-image:
    linear-gradient(white, white),
    linear-gradient(135deg, #3B82F6, #EC4899);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

動畫漸層背景

.animated-gradient {
  background: linear-gradient(-45deg, #3B82F6, #8B5CF6, #EC4899, #F59E0B);
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

效能考量

漸層由 GPU 加速且效能良好：

漸層的渲染速度比等效的圖片更快
background-size 會影響渲染成本 — 較小的磚塊更省資源
避免直接對漸層顏色做動畫 — 改為對 background-position 做動畫
含有多個色標的複雜漸層仍然比 PNG 更快

瀏覽器支援

所有現代瀏覽器都支援線性、放射狀和錐形漸層。錐形漸層是最新的，自 2020 年起在所有主要瀏覽器中都獲得支援（Chrome 69+、Firefox 83+、Safari 12.1+）。任何漸層類型都不需要供應商前綴。

常見問題

如何修復兩種顏色之間看起來混濁的漸層？

混濁的漸層發生在色輪上經過灰色的顏色之間過渡時。解決方案：在中間點添加一個更鮮豔色相的色標、使用 oklch 色彩空間（linear-gradient(in oklch, ...)）實現感知均勻的過渡，或增加中間點顏色的飽和度。

漸層能取代背景圖片嗎？

對於抽象圖案、覆蓋層和裝飾性背景 — 完全可以。漸層的載入時間為零、縮放完美，且不需要 HTTP 請求。對於複雜的視覺效果或照片，仍然需要圖片。許多現代設計將兩者結合：在背景圖片上疊加漸層覆蓋。