CSS 漸層完全指南：線性/放射/錐形漸層與進階視覺效果實戰

CSS 漸層的三種類型

類型	語法	視覺效果
線性漸層	linear-gradient()	沿直線方向過渡
放射漸層	radial-gradient()	從中心向外擴散
錐形漸層	conic-gradient()	圍繞中心旋轉

---

線性漸層（linear-gradient）

基礎語法

/* 方向 + 色標 */
background: linear-gradient(方向, 色標1, 色標2, ...);

/* 範例 */
background: linear-gradient(to right, #667eea, #764ba2);
background: linear-gradient(135deg, #f093fb, #f5576c);
background: linear-gradient(to bottom right, #4facfe, #00f2fe);

方向參數

/* 關鍵字方向 */
to top          /* 從下到上 */
to right        /* 從左到右 */
to bottom       /* 從上到下（預設） */
to left         /* 從右到左 */
to top right    /* 對角線 */

/* 角度（更精確） */
0deg    /* → to top */
90deg   /* → to right */
180deg  /* → to bottom */
45deg   /* → 右上對角 */
135deg  /* → 右下對角 */

色標控制

/* 等距分佈（自動計算位置） */
background: linear-gradient(red, yellow, green);
/* red: 0%, yellow: 50%, green: 100% */

/* 指定位置 */
background: linear-gradient(red 0%, yellow 30%, green 100%);

/* 硬邊界（無過渡） */
background: linear-gradient(red 50%, blue 50%);

/* 多段漸層 */
background: linear-gradient(
  red 0%, red 20%,
  yellow 20%, yellow 40%,
  green 40%, green 60%,
  blue 60%, blue 80%,
  purple 80%, purple 100%
);

---

放射漸層（radial-gradient）

基礎語法

background: radial-gradient(形狀 大小 at 位置, 色標...);

/* 範例 */
background: radial-gradient(circle, #ff6b6b, #556270);
background: radial-gradient(ellipse at top, #ffd89b, #19547b);
background: radial-gradient(circle 100px at center, #fff, #000);

形狀

circle    /* 圓形 */
ellipse   /* 橢圓（預設） */

大小關鍵字

closest-side     /* 到最近邊 */
farthest-side    /* 到最遠邊 */
closest-corner   /* 到最近角 */
farthest-corner  /* 到最遠角（預設） */

位置

at center           /* 置中（預設） */
at top left         /* 左上角 */
at 30% 70%          /* 百分比定位 */
at 100px 200px      /* 像素定位 */

---

錐形漸層（conic-gradient）

基礎語法

background: conic-gradient(from 起始角度 at 位置, 色標...);

/* 範例 */
background: conic-gradient(red, yellow, green, blue, red);
background: conic-gradient(from 45deg, #f00, #0f0, #00f, #f00);

實戰：圓餅圖

.pie-chart {
  background: conic-gradient(
    #3b82f6 0% 35%,
    #ef4444 35% 55%,
    #22c55e 55% 80%,
    #f59e0b 80% 100%
  );
  border-radius: 50%;
}

實戰：色輪

.color-wheel {
  background: conic-gradient(
    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%)
  );
  border-radius: 50%;
}

---

進階視覺效果

1. 漸層疊加（多層漸層）

.multi-gradient {
  background:
    linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}

2. 網格背景

.grid-bg {
  background:
    linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

3. 點陣背景

.dot-bg {
  background: radial-gradient(circle 2px, #999 100%, transparent 100%);
  background-size: 20px 20px;
}

4. 光效（Shine Effect）

.shine-button {
  position: relative;
  overflow: hidden;
  background: #3b82f6;
}

.shine-button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.4) 45%,
    rgba(255,255,255,0.4) 55%,
    transparent 60%
  );
  animation: shine 3s infinite;
}

@keyframes shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

5. 玻璃擬態（Glassmorphism）

.glass-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

6. 漸層文字

.gradient-text {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

7. 漸層邊框

.gradient-border {
  position: relative;
  background: #1f2937;
  border-radius: 12px;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
  border-radius: 14px;
  z-index: -1;
}

8. 動態漸層

.animated-gradient {
  background: linear-gradient(
    -45deg,
    #ee7752, #e73c7e, #23a6d5, #23d5ab
  );
  background-size: 400% 400%;
  animation: gradient-shift 8s ease infinite;
}

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

---

重複漸層

/* 重複線性漸層 → 條紋 */
.repeating-linear {
  background: repeating-linear-gradient(
    45deg,
    #3b82f6,
    #3b82f6 10px,
    #60a5fa 10px,
    #60a5fa 20px
  );
}

/* 重複放射漸層 → 靶心 */
.repeating-radial {
  background: repeating-radial-gradient(
    circle,
    #3b82f6,
    #3b82f6 10px,
    #60a5fa 10px,
    #60a5fa 20px
  );
}

/* 重複錐形漸層 → 雷達 */
.repeating-conic {
  background: repeating-conic-gradient(
    #3b82f6 0deg 30deg,
    #60a5fa 30deg 60deg
  );
}

---

使用工具庫漸層產生器

1. 開啟 CSS 漸層產生器
2. 選擇漸層類型（線性/放射/錐形）
3. 新增色標，調整位置和顏色
4. 調整方向/角度
5. 即時預覽效果
6. 複製產生的 CSS 程式碼

---

漸層效能最佳化

技巧	說明
避免過多色標	3-5 個色標最佳，超過 8 個影響渲染
優先用 hex 而非 rgba	#ff000080 比 rgba(255,0,0,0.5) 更短
漸層區域盡量小	大面積漸層增加繪製成本
動畫用 background-position	不要對色標值做動畫
will-change: background	對動畫漸層加上提示

---

瀏覽器相容性

特性	Chrome	Firefox	Safari
linear-gradient	✅ 全部	✅ 全部	✅ 全部
radial-gradient	✅ 全部	✅ 全部	✅ 全部
conic-gradient	69+	83+	12.1+
repeating-conic-gradient	69+	83+	12.1+
多層漸層	✅ 全部	✅ 全部	✅ 全部
background-clip: text	✅	49+	✅

---

總結

CSS 漸層是視覺設計的瑞士刀——從簡單的雙色過渡到複雜的網格背景、光效、玻璃擬態，漸層都能勝任。掌握線性/放射/錐形三種類型 + 色標控制 + 多層疊加，就能實作絕大多數視覺效果。工具庫的 漸層產生器 讓你視覺化調整參數，一鍵複製 CSS 程式碼。