CSSグラデーションの書き方【コピペで使えるコード付き・無料ジェネレーター】

CSSのグラデーションはWebデザインで最もよく使われる視覚効果のひとつです。linear-gradient・radial-gradient・conic-gradientの3種類を、コピペで使えるコード例とともに解説します。

linear-gradient（線形グラデーション）

指定した角度や方向に沿って色が変化する最も基本的なグラデーションです。

基本的な書き方

/* 角度を指定（135度） */
background: linear-gradient(135deg, #667eea, #764ba2);

/* 方向キーワード */
background: linear-gradient(to right, #ff6b6b, #feca57);
background: linear-gradient(to bottom right, #00b09b, #96c93d);

/* 3色以上のグラデーション */
background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #4facfe 100%);

よく使われる角度

• 0deg — 下から上
• 90deg — 左から右
• 135deg — 左上から右下（斜め、よく使われる）
• 180deg — 上から下（デフォルトと同じ）

radial-gradient（放射状グラデーション）

中心から円状・楕円状に広がるグラデーションです。スポットライト効果やアイコン背景に使われます。

/* 基本（円形） */
background: radial-gradient(circle, #667eea, #764ba2);

/* 中心位置を指定 */
background: radial-gradient(circle at top left, #ff6b6b, #feca57);

/* サイズ指定 */
background: radial-gradient(circle 200px at center, #00c6ff, transparent);

conic-gradient（円錐グラデーション）

中心点を軸に回転しながら色が変わるグラデーションです。円グラフ風デザインやカラーホイールに活用できます。

/* 基本 */
background: conic-gradient(from 0deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #ff6b6b);

/* 開始角度を指定 */
background: conic-gradient(from 45deg, red, blue);

/* 円グラフ風（50/50） */
background: conic-gradient(#667eea 50%, #764ba2 50%);

実践的な使い方例

ヘッダー・バナー背景

.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 80px 24px;
}

ボタンのグラデーション

.btn-gradient {
  background: linear-gradient(135deg, #f093fb, #f5576c);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-gradient:hover {
  opacity: 0.85;
}

テキストにグラデーションをかける

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

Tailwind CSSでのグラデーション

<!-- Tailwind CSS v3 標準クラス -->
<div class="bg-gradient-to-r from-purple-500 to-pink-500">...</div>

<!-- カスタムカラーはstyleで -->
<div style="background: linear-gradient(135deg, #667eea, #764ba2)">...</div>

無料グラデーション生成ツール

コードを手書きするのが面倒な場合はCSSグラデーション生成ツールを使いましょう。 Linear・Radial・Conicを視覚的に設定し、カラーストップを追加してCSSコードをワンクリックでコピーできます。 20種類のプリセットもあるので、すぐに使えるグラデーションが見つかります。