CSS 漸層 (Gradients)

CSS 漸層可以建立顏色平滑過渡的背景效果，不需要使用圖片。

linear-gradient（線性漸層）

顏色沿著一條直線漸變。

基本語法

.gradient {
  background: linear-gradient(方向, 顏色1, 顏色2, ...);
}

預設方向（上到下）

.gradient {
  background: linear-gradient(red, blue);
}

指定方向

.gradient {
  background: linear-gradient(to right, red, blue);      /* 左到右 */
  background: linear-gradient(to left, red, blue);       /* 右到左 */
  background: linear-gradient(to bottom, red, blue);     /* 上到下（預設） */
  background: linear-gradient(to top, red, blue);        /* 下到上 */
  background: linear-gradient(to bottom right, red, blue); /* 對角 */
}

使用角度

.gradient {
  background: linear-gradient(0deg, red, blue);     /* 下到上 */
  background: linear-gradient(90deg, red, blue);    /* 左到右 */
  background: linear-gradient(180deg, red, blue);   /* 上到下 */
  background: linear-gradient(45deg, red, blue);    /* 對角 */
}

多個顏色

.rainbow {
  background: linear-gradient(to right, red, orange, yellow, green, blue, purple);
}

控制顏色位置

.gradient {
  background: linear-gradient(to right, red 0%, blue 100%);
  background: linear-gradient(to right, red 0%, yellow 50%, blue 100%);
  background: linear-gradient(to right, red 30%, blue 70%);  /* 中間漸變區較短 */
}

硬邊界（無漸變）

.hard-stop {
  background: linear-gradient(to right, red 50%, blue 50%);
}

radial-gradient（放射漸層）

顏色從中心向外放射漸變。

基本語法

.gradient {
  background: radial-gradient(red, blue);
}

形狀

.gradient {
  background: radial-gradient(circle, red, blue);     /* 圓形 */
  background: radial-gradient(ellipse, red, blue);    /* 橢圓（預設） */
}

大小

.gradient {
  background: radial-gradient(circle closest-side, red, blue);
  background: radial-gradient(circle farthest-side, red, blue);
  background: radial-gradient(circle closest-corner, red, blue);
  background: radial-gradient(circle farthest-corner, red, blue);  /* 預設 */
}

位置

.gradient {
  background: radial-gradient(circle at center, red, blue);       /* 預設 */
  background: radial-gradient(circle at top left, red, blue);
  background: radial-gradient(circle at 20% 30%, red, blue);
}

完整語法

.gradient {
  background: radial-gradient(circle 100px at 50% 50%, red, blue);
}

conic-gradient（圓錐漸層）

顏色沿著圓周方向漸變。

.gradient {
  background: conic-gradient(red, yellow, green, blue, red);
}

/* 從特定角度開始 */
.gradient {
  background: conic-gradient(from 45deg, red, blue);
}

/* 從特定位置開始 */
.gradient {
  background: conic-gradient(at 50% 50%, red, blue);
}

餅圖效果

.pie {
  background: conic-gradient(
    red 0deg 90deg,
    blue 90deg 180deg,
    green 180deg 270deg,
    yellow 270deg 360deg
  );
  border-radius: 50%;
}

repeating-gradient（重複漸層）

重複線性漸層

.stripes {
  background: repeating-linear-gradient(
    45deg,
    #f0f0f0,
    #f0f0f0 10px,
    #ffffff 10px,
    #ffffff 20px
  );
}

重複放射漸層

.circles {
  background: repeating-radial-gradient(
    circle,
    #f0f0f0,
    #f0f0f0 10px,
    #ffffff 10px,
    #ffffff 20px
  );
}

實用範例

漂亮的背景

.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.sunset {
  background: linear-gradient(to bottom, #ff6b6b, #feca57, #48dbfb);
}

文字漸層

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

按鈕漸層

.btn-gradient {
  background: linear-gradient(to right, #667eea, #764ba2);
  border: none;
  color: white;
  padding: 12px 24px;
}

.btn-gradient:hover {
  background: linear-gradient(to right, #764ba2, #667eea);
}

卡片光澤

.card {
  background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
}

條紋背景

.stripes {
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(0,0,0,0.03) 10px,
    rgba(0,0,0,0.03) 20px
  );
}

覆蓋層

.overlay {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.7) 100%
  );
}

多層漸層

.multi-gradient {
  background: 
    linear-gradient(to right, rgba(255,0,0,0.5), transparent),
    linear-gradient(to bottom, rgba(0,0,255,0.5), transparent),
    white;
}

光暈效果

.glow {
  background: radial-gradient(
    circle at center,
    rgba(255,255,255,0.8) 0%,
    transparent 70%
  );
}

漸層工具

線上漸層產生器可以幫助你設計漸層：

• CSS Gradient
• UI Gradients
• Gradient Hunt

瀏覽器支援

現代瀏覽器都支援 CSS 漸層，舊版瀏覽器可以設定 fallback：

.gradient {
  background: #667eea;  /* fallback */
  background: linear-gradient(to right, #667eea, #764ba2);
}