CSS 漸層設計技巧：linear-gradient、radial-gradient 與實用配色方案

為什麼漸層在 UI 設計中如此重要？

漸層（Gradient）是現代 UI 設計中最常使用的視覺元素之一。從 Apple 的 iOS 介面到 Instagram 的品牌 Logo，漸層無處不在。相較於純色背景，漸層能帶來更豐富的視覺層次感，讓設計看起來更精緻、更有深度。

CSS 原生支援漸層功能，不需要載入任何圖片檔案，這意味著：

• 零 HTTP 請求：減少頁面載入時間
• 無限縮放：不像點陣圖片會模糊
• 易於修改：直接改 CSS 即可調整
• 支援動態效果：可搭配 CSS 動畫使用

漸層設計的演進趨勢

漸層設計在過去十年經歷了明顯的週期變化。2010 年代初期的擬真設計（Skeuomorphism）大量使用漸層模擬光影效果；2013 年扁平化設計興起後，漸層一度被淘汰；到了 2017 年，以 Instagram 新 Logo 為代表，漸層以更大膽、更鮮豔的方式回歸。如今的漸層設計趨勢是「微妙而有目的」——不再是純粹的裝飾，而是用來引導視線、建立層次和強化品牌識別。

在 2025-2026 年的設計趨勢中，網格漸層（Mesh Gradient）和玻璃擬態（Glassmorphism）中的模糊漸層效果持續流行，CSS 漸層技術是實現這些效果的基礎。

linear-gradient — 線性漸層

線性漸層是最常用的漸層類型，顏色沿著一條直線方向過渡。掌握線性漸層的語法和技巧，就能處理 80% 以上的漸層設計需求。

基本語法

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

方向設定

線性漸層的方向可以用關鍵字或角度值來指定：

/* 從上到下（預設） */
background: linear-gradient(to bottom, #667eea, #764ba2);

/* 從左到右 */
background: linear-gradient(to right, #f093fb, #f5576c);

/* 對角線 */
background: linear-gradient(to bottom right, #4facfe, #00f2fe);

/* 使用角度（0deg = 向上，90deg = 向右，180deg = 向下） */
background: linear-gradient(135deg, #667eea, #764ba2);

角度值的計算方式：以元素中心為原點，0deg 是從下往上，順時針旋轉。最常用的角度是 135deg（左上到右下）和 45deg（左下到右上），這兩個方向帶來自然的光影效果。

多色漸層

可以指定多個顏色停駐點（Color Stops）：

/* 三色漸層 */
background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #feca57 100%);

/* 彩虹漸層 */
background: linear-gradient(
  to right,
  #ff0000, #ff7700, #ffff00,
  #00ff00, #0000ff, #8b00ff
);

控制漸層比例

透過百分比精確控制每個顏色的位置和過渡區域：

/* 前 30% 為藍色，30%-100% 過渡到紫色 */
background: linear-gradient(135deg, #667eea 30%, #764ba2 100%);

/* 硬邊界（無過渡效果）— 可用於色條效果 */
background: linear-gradient(to right, #667eea 50%, #764ba2 50%);

/* 中間有明確的純色區域 */
background: linear-gradient(to right, #667eea 0%, #667eea 30%, #764ba2 70%, #764ba2 100%);

重複線性漸層

repeating-linear-gradient 可以建立重複的條紋圖案，適合背景裝飾：

/* 斜條紋背景 */
background: repeating-linear-gradient(
  45deg,
  #667eea,
  #667eea 10px,
  #764ba2 10px,
  #764ba2 20px
);

/* 進度條效果 */
background: repeating-linear-gradient(
  -45deg,
  transparent,
  transparent 8px,
  rgba(255,255,255,0.1) 8px,
  rgba(255,255,255,0.1) 16px
);

radial-gradient — 放射漸層

放射漸層從中心點向外擴散，適合用於聚焦效果、光暈、按鈕高亮和裝飾性背景。

基本語法

background: radial-gradient(形狀 大小 at 位置, 顏色1, 顏色2);

常用範例

/* 從中心向外 — 圓形 */
background: radial-gradient(circle, #667eea, #764ba2);

/* 橢圓形（預設） */
background: radial-gradient(ellipse, #f093fb, #f5576c);

/* 指定中心點位置 */
background: radial-gradient(circle at top left, #4facfe, #00f2fe);

/* 發光效果 */
background: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.3), transparent 70%);

放射漸層的大小控制

放射漸層有四個預定義的大小關鍵字：

/* closest-side：漸層延伸到最近的邊 */
background: radial-gradient(circle closest-side at 30% 30%, #667eea, #764ba2);

/* farthest-corner（預設）：漸層延伸到最遠的角 */
background: radial-gradient(circle farthest-corner at 30% 30%, #667eea, #764ba2);

/* 也可以用像素指定精確大小 */
background: radial-gradient(circle 200px at center, #667eea, transparent);

多層放射漸層疊加

利用多層放射漸層可以創造出複雜的光影效果：

.ambient-light {
  background:
    radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.15), transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(245, 87, 108, 0.15), transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(67, 56, 202, 0.1), transparent 50%),
    #0f172a;
}

conic-gradient — 錐形漸層

錐形漸層圍繞中心點旋轉分佈顏色，是三種漸層中最新加入的（Chrome 69+、Firefox 83+）。適合做圓餅圖、色彩輪盤和進度指示器。

基本語法與應用

/* 色彩輪盤 */
background: conic-gradient(red, yellow, green, cyan, blue, magenta, red);

/* 簡易圓餅圖 — 75% 完成 */
background: conic-gradient(#6366f1 75%, #e5e7eb 75%);
border-radius: 50%;

/* 多段圓餅圖 */
background: conic-gradient(
  #6366f1 0% 40%,    /* 藍紫：40% */
  #f59e0b 40% 65%,   /* 橘黃：25% */
  #10b981 65% 85%,   /* 綠色：20% */
  #e5e7eb 85% 100%   /* 灰色：15% */
);
border-radius: 50%;

/* 從指定角度開始 */
background: conic-gradient(from 90deg, #667eea, #764ba2);

錐形漸層配合 border-radius: 50% 可以輕鬆建立圓餅圖，無需 Canvas 或 SVG，非常適合簡單的數據視覺化場景。

12 組常用漸層配色方案

以下是精心挑選的配色方案，適用於不同的設計場景。每組方案都經過色彩理論驗證，確保視覺和諧。

科技 / 專業

/* 1. 極光紫 — 科技感、AI、SaaS */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* 2. 深海藍 — 商業、金融、企業 */
background: linear-gradient(135deg, #0c3483 0%, #a2b6df 100%);

/* 3. 暗夜模式 — Dashboard、管理後台 */
background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);

極光紫是目前最流行的科技產品配色之一，被 Stripe、Linear 等知名 SaaS 產品廣泛使用。它融合了藍色的信任感和紫色的創新感，非常適合 AI 工具、開發者產品和現代 Web 應用。

活力 / 行銷

/* 4. 日落橘 — 行銷、CTA、促銷 */
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

/* 5. 熱帶水果 — 年輕、活潑、社群 */
background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);

/* 6. 霓虹綠 — 遊戲、電競、動感 */
background: linear-gradient(135deg, #38f9d7 0%, #43e97b 100%);

自然 / 柔和

/* 7. 薄荷清新 — 健康、環保、自然 */
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);

/* 8. 天空藍 — 旅遊、教育、開放 */
background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);

/* 9. 櫻花粉 — 美容、時尚、柔美 */
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);

深色 / 高級

/* 10. 碳黑金 — 奢侈品、高端 */
background: linear-gradient(135deg, #434343 0%, #000000 100%);

/* 11. 銀河紫 — 宇宙、科幻 */
background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);

/* 12. 翡翠綠 — 金融、投資、成長 */
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);

如何選擇適合的漸層配色

選擇漸層配色時，建議遵循以下原則：

1. 色輪相鄰的顏色（類似色）過渡最自然，適合大面積背景
2. 避免互補色直接漸層（如紅→綠），中間會出現灰濁的「死亡區域」
3. 加入中間色可改善色彩過渡：紅→橘→黃 比 紅→黃 更順暢
4. 深色系漸層適合背景，亮色系漸層適合按鈕和小型元素
5. 品牌一致性：整個網站的漸層方向和色系應保持一致

UI 設計中的漸層應用

漸層按鈕

漸層按鈕是最常見的 UI 應用，能讓按鈕更具立體感和點擊慾望：

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.btn-primary:active {
  transform: translateY(0);
}

按鈕加上與漸層同色系的 box-shadow 可以營造出發光的懸浮效果，這是目前非常流行的 UI 技巧。

文字漸層

漸層文字在標題和品牌名稱中非常搶眼：

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

注意：漸層文字在所有現代瀏覽器中都已支援，但 background-clip: text 仍建議加上 -webkit- 前綴以確保相容性。另外，漸層文字無法被選取時顯示顏色，需要額外處理 ::selection 樣式。

漸層邊框

CSS 原生不支援 border-image 搭配 border-radius，因此漸層邊框通常用 background-image 技巧實現：

.gradient-border {
  border: 2px solid transparent;
  background-image:
    linear-gradient(white, white),
    linear-gradient(135deg, #667eea, #764ba2);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-radius: 12px;
}

原理解釋：兩層背景圖疊加——內層白色填充 padding 區域，外層漸層填充整個 border-box，因為內層遮住了 padding 區域，所以漸層只在 border 區域可見。

背景疊加（Overlay）

在圖片上加漸層遮罩，是提升文字可讀性的常用手法：

.hero-section {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7)),
    url('hero-image.jpg') center/cover;
  color: white;
}

/* 品牌色遮罩 — 更有設計感 */
.hero-branded {
  background:
    linear-gradient(135deg, rgba(99,102,241,0.8), rgba(118,75,162,0.8)),
    url('hero-image.jpg') center/cover;
  color: white;
}

這個技巧的關鍵在於漸層遮罩要確保文字在所有位置都有足夠的對比度。底部通常需要更深的遮罩，因為內容文字通常在底部。可以使用 Super Tools 的色彩工具檢查對比度是否符合 WCAG 標準。

動態漸層動畫

漸層動畫可以為頁面增添活力，適合 Hero 區塊和 Loading 狀態：

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

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

效能注意： CSS 漸層動畫是透過改變 background-position 實現的，每一幀都會觸發重繪（repaint）。在大面積元素或低階裝置上可能造成卡頓。建議限制動畫面積，並使用 will-change: background-position 提示瀏覽器預先優化。

骨架屏（Skeleton Screen）載入效果

漸層動畫常用於內容載入時的骨架屏效果：

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

漸層設計的注意事項與最佳實踐

對比度與無障礙

漸層背景上的文字必須在所有位置都保持足夠對比度（WCAG AA 標準 4.5:1）。檢查時要特別注意漸層最淺的區域，因為那裡的對比度最低。

效能優化

• CSS 漸層比圖片更輕量，但複雜的多層漸層仍會消耗 GPU 資源
• 避免在 scroll 事件中動態改變漸層參數
• repeating-linear-gradient 配合 will-change 使用時需謹慎
• 移動裝置上，過多的漸層動畫可能導致電池快速消耗

色彩過渡品質

• 避免互補色直接漸層（如紅→綠），中間會出現灰濁區域
• 加入中間色可大幅改善過渡品質
• 使用 Lab 或 OKLab 色彩空間的漸層可以避免灰濁問題（CSS Color Level 4 新特性）

/* CSS Color Level 4 — 更好的色彩過渡 */
background: linear-gradient(in oklch, #667eea, #764ba2);

跨瀏覽器相容性

CSS 漸層在所有現代瀏覽器中都有良好支援。但 conic-gradient 在較舊的瀏覽器中可能不支援，建議提供 fallback：

.pie-chart {
  background: #6366f1; /* fallback */
  background: conic-gradient(#6366f1 75%, #e5e7eb 75%);
}

常見問題 FAQ

Q1：漸層方向應該如何選擇？

135deg（左上到右下）是最常用且最自然的漸層方向，因為它模擬了自然光從左上方照射的效果。水平方向（to right）適合導航列和進度條。垂直方向（to bottom）適合頁面區塊的背景過渡。選擇時考慮使用者的視線移動方向和光源邏輯。

Q2：漸層配色看起來「髒髒的」怎麼辦？

這通常是因為兩個色彩在色輪上距離太遠（互補色），中間過渡經過了低飽和度的灰色區域。解決方法有三種：(1) 加入中間色引導過渡；(2) 改用色輪相鄰的顏色；(3) 使用 CSS Color Level 4 的 in oklch 色彩空間，它能避免灰濁過渡問題。

Q3：漸層動畫會影響效能嗎？

會。CSS 漸層動畫透過改變 background-position 或 background-size 來實現，每一幀都會觸發 repaint。在大面積元素和低階手機上可能造成卡頓。建議：限制動畫元素的面積、使用 will-change 提示、動畫時間不要太短（建議 4-8 秒）、在移動裝置上考慮使用 prefers-reduced-motion 媒體查詢關閉動畫。

Q4：如何在漸層背景上確保文字可讀性？

在漸層最淺的位置測量對比度，確保達到 WCAG AA 標準（4.5:1）。如果對比度不足，可以加深漸層整體色調、在文字下方加半透明黑色背景、或增加文字的 text-shadow。使用 Super Tools 的色彩工具可以快速檢查對比度。

Q5：有沒有快速產生漸層 CSS 的工具？

Super Tools 的漸層產生器可以透過拖拉介面即時產生漸層 CSS 代碼。你也可以參考 WebGradients（180 種漸層）和 CSS Gradient（即時編輯器）等線上資源獲取靈感。

動手試試

想即時預覽漸層效果？使用 Super Tools 的漸層產生器，拖拉選色即可產生漸層 CSS 代碼，支援多色漸層、方向調整和即時預覽。搭配色彩工具進行對比度檢查，確保你的漸層設計不僅美觀，還符合無障礙標準。立即開始打造你的下一個漸層設計作品！