跳至正文

CSS漸變生成器

可視化創建CSS線性、徑向、圓錐漸變並複製代碼的免費線上工具。

預覽

漸層類型

角度

°

色彩點

%
%

CSS 代碼

background: linear-gradient(90deg, #3498db 0%, #e74c3c 100%);

預設漸層

主要功能​

  • 3種類型: 線性(linear)、徑向(radial)、圓錐(conic)漸變
  • 即時預覽: 立即查看更改
  • 色標: 添加最多8個色標
  • 角度控制: 設置線性/圓錐漸變角度(0-360°)
  • 位置控制: 設置每個顏色位置從0-100%
  • 預設: 6個精美的漸變預設
  • 一鍵複製: 立即複製CSS代碼

漸變類型​

1. 線性漸變 (Linear Gradient)​

background: linear-gradient(90deg, #3498db 0%, #e74c3c 100%);
  • 顏色沿一個方向過渡
  • 通過角度指定方向(0° = 上，90° = 右，180° = 下，270° = 左)
  • 最常用的類型

使用場景:

  • 按鈕背景
  • 頁頭背景
  • 卡片背景

2. 徑向漸變 (Radial Gradient)​

background: radial-gradient(circle, #3498db 0%, #e74c3c 100%);
  • 顏色從中心向外過渡
  • 創建圓形效果
  • 適用於聚光燈效果

使用場景:

  • 背景裝飾
  • 按鈕懸停效果
  • Logo背景

3. 圓錐漸變 (Conic Gradient)​

background: conic-gradient(from 90deg, #3498db 0%, #e74c3c 100%);
  • 顏色圍繞中心旋轉過渡
  • 非常適合製作餅圖和色輪
  • CSS3中添加的較新功能

使用場景:

  • 餅圖
  • 進度環
  • 色輪

色標 (Color Stops)​

基本概念​

色標定義漸變中特定顏色開始或結束的位置。

/* 2種顏色 */
linear-gradient(90deg, #FF0000 0%, #0000FF 100%)

/* 3種顏色 */
linear-gradient(90deg, #FF0000 0%, #00FF00 50%, #0000FF 100%)

/* 4種顏色 */
linear-gradient(90deg, #FF0000 0%, #FFFF00 33%, #00FF00 66%, #0000FF 100%)

位置調整提示​

  • 0%: 起點
  • 50%: 中點
  • 100%: 終點
  • 重疊位置可創建急劇的顏色過渡
  • 均勻分布可創建平滑過渡

實用示例​

1. 按鈕漸變​

.button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

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

2. 背景疊加​

.hero-section {
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
              url('background.jpg');
  background-size: cover;
}

3. 文字漸變​

.gradient-text {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 48px;
  font-weight: bold;
}

4. 進度條​

.progress-bar {
  background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);
  height: 8px;
  border-radius: 4px;
  width: 60%; /* 進度狀態 */
}

5. 卡片背景​

.card {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  padding: 30px;
  border-radius: 12px;
  color: white;
}

預設漸變​

Sunset (日落)​

background: linear-gradient(90deg, #FF512F 0%, #F09819 100%);

溫暖的橙紅組合，充滿活力

Ocean (海洋)​

background: linear-gradient(135deg, #2E3192 0%, #1BFFFF 100%);

清爽的藍青組合，乾淨清新

Forest (森林)​

background: linear-gradient(90deg, #134E5E 0%, #71B280 100%);

平靜的青綠組合，自然氣息

Purple Dream (紫色夢幻)​

background: linear-gradient(45deg, #C471F5 0%, #FA71CD 100%);

夢幻的紫粉組合，現代時尚

Fire (火焰)​

background: radial-gradient(circle, #FDBB2D 0%, #22C1C3 100%);

徑向黃青組合，動感十足

Rainbow (彩虹)​

background: linear-gradient(90deg, #FF0000 0%, #FFFF00 33%, #00FF00 66%, #0000FF 100%);

4色彩虹效果，絢麗多彩

瀏覽器兼容性​

Linear Gradient​

  • ✅ Chrome 26+
  • ✅ Firefox 16+
  • ✅ Safari 7+
  • ✅ Edge 12+
  • ✅ 所有移動瀏覽器

Radial Gradient​

  • ✅ Chrome 26+
  • ✅ Firefox 16+
  • ✅ Safari 7+
  • ✅ Edge 12+
  • ✅ 所有移動瀏覽器

Conic Gradient​

  • ✅ Chrome 69+
  • ✅ Firefox 83+
  • ✅ Safari 12.1+
  • ✅ Edge 79+
  • ⚠️ IE不支援

性能優化​

1. 使用will-change​

.gradient-element {
  will-change: background;
}

動畫時的GPU加速

2. 複雜漸變使用圖片​

非常複雜的漸變轉換為圖片可提高性能

3. 可重用類​

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

設計技巧​

1. 顏色選擇​

  • 相似色調: 平滑過渡
  • 互補色: 強烈對比
  • 3色以下: 大多數情況下足夠

2. 角度選擇​

  • 90°: 從左到右(最常見)
  • 180°: 從上到下
  • 135°: 對角線(動態感)

3. 使用透明度​

background: linear-gradient(90deg,
  rgba(52, 152, 219, 0.8) 0%,
  rgba(231, 76, 60, 0.8) 100%
);

4. 動畫​

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

.animated-gradient {
  background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

可訪問性考慮​

1. 對比度​

漸變上的文字需要足夠的對比度(WCAG標準4.5:1)

2. 文字可讀性​

/* 用文字陰影提高可讀性 */
.text-on-gradient {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

3. 使用疊加​

.gradient-with-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}

相關工具​