グラデーション背景の見出しデザイン10選

h2要素を使用して、グラデーション背景の見出しを作成してください。

- 以下のグラデーションを使用:
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e92c5 100%);
- 文字色は白色
- 内側に適度な余白
- 角丸で柔らかい印象
- 影を付けて立体感を出す

.heading-cool-blue {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e92c5 100%); /* 対角線方向の3色グラデーション */
    color: white; /* 濃い背景に対して白文字 */
    box-shadow: 0 8px 24px rgba(30, 60, 114, 0.3); /* グラデーション開始色と同系色の影 */
}

h2要素を使用して、温かみのあるグラデーション背景の見出しを作成してください。

- 以下のグラデーションを使用:
  background: linear-gradient(135deg, #ff6b6b 0%, #ffa07a 50%, #ffe4b5 100%);
- 文字色は白色
- text-shadowで文字に軽い影を付ける
- 角丸で柔らかい印象
- 影を付けて立体感を出す

.heading-sunset-orange {
    background: linear-gradient(135deg, #ff6b6b 0%, #ffa07a 50%, #ffe4b5 100%); /* 暖色系の3段階グラデーション */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* 文字に軽い影で立体感 */
    box-shadow: 0 8px 24px rgba(255, 107, 107, 0.3); /* 開始色と同系色の影 */
}

h2要素を使用して、ゴールドのグラデーション背景の見出しを作成してください。

- 以下のグラデーションを使用:
  background: linear-gradient(135deg, #ca8a04 0%, #facc15 50%, #fef9c3 100%);
- 文字色は濃い茶色(#78350f)
- 角丸で柔らかい印象
- 金色系の影を付けて華やかさを出す

.heading-golden-yellow {
    background: linear-gradient(135deg, #ca8a04 0%, #facc15 50%, #fef9c3 100%); /* 金色系のグラデーション */
    color: #78350f; /* 明るい背景に対して濃い茶色の文字 */
    box-shadow: 0 8px 24px rgba(202, 138, 4, 0.3); /* 金色の影 */
}

h2要素を使用して、放射状グラデーション背景の見出しを作成してください。

- 以下のグラデーションを使用:
  background: radial-gradient(ellipse at center, #fff4e6 0%, #ffd700 30%, #ff8c00 60%, #ff4500 100%);
- 中心から外側に向かって色が濃くなる太陽のような表現
- 文字色は茶色系(#8b4513)
- text-shadowで文字に白い影を付けて明るさを強調
- 角丸で柔らかい印象
- オレンジ色の影を付けて立体感を出す

.heading-sunburst {
    background: radial-gradient(ellipse at center, #fff4e6 0%, #ffd700 30%, #ff8c00 60%, #ff4500 100%); /* 中心から放射状 */
    color: #8b4513; /* 茶色の文字 */
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5); /* 白い影で明るさを強調 */
    box-shadow: 0 8px 24px rgba(255, 140, 0, 0.4); /* オレンジの影 */
}

h2要素を使用して、左上から広がる放射状グラデーション背景の見出しを作成してください。

- 以下のグラデーションを使用:
  background: radial-gradient(circle at top left, #4facfe 0%, #00f2fe 40%, #43e97b 70%, #38f9d7 100%);
- 左上の角から円形に広がる
- 青から緑へのカラフルな配色
- 文字色は白色
- 角丸で柔らかい印象
- 青色系の影を付けて立体感を出す

.heading-corner-light {
    background: radial-gradient(circle at top left, #4facfe 0%, #00f2fe 40%, #43e97b 70%, #38f9d7 100%); /* 左上から円形放射 */
    color: white; /* 濃い背景に白文字 */
    box-shadow: 0 8px 24px rgba(79, 172, 254, 0.4); /* 青色系の影 */
}

h2要素を使用して、自然な配色のグラデーション背景の見出しを作成してください。

- 以下のグラデーションを使用:
  background: linear-gradient(135deg, #244c33 0%, #2e5e4a 50%, #2e292b 100%);
- 深い森の緑からブラウンへの落ち着いた配色
- 文字色は明るいベージュ(#f0d7cc)
- 角丸で柔らかい印象
- 緑色系の影を付けて立体感を出す

.heading-earth-green {
    background: linear-gradient(135deg, #244c33 0%, #2e5e4a 50%, #2e292b 100%); /* 緑からブラウンへ */
    color: #f0d7cc; /* 暗い背景に明るいベージュ */
    box-shadow: 0 8px 24px rgba(36, 76, 51, 0.4); /* 緑色系の影 */
}

h2要素を使用して、紫からブルーへのグラデーション背景の見出しを作成してください。

- 以下のグラデーションを使用:
  background: linear-gradient(180deg, #a855f7 0%, #7c3aed 25%, #4f46e5 50%, #3b82f6 75%, #06b6d4 100%);
- 上から下への5段階グラデーション
- 紫から青へのスムーズな色の変化
- 文字色は白色
- 角丸で柔らかい印象
- 紫色系の影を付けて立体感を出す

.heading-midnight-purple {
    background: linear-gradient(180deg, #a855f7 0%, #7c3aed 25%, #4f46e5 50%, #3b82f6 75%, #06b6d4 100%); /* 5段階の垂直グラデーション */
    color: white; /* 濃い背景に白文字 */
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.4); /* 紫色系の影 */
}

h2要素を使用して、ラベンダーからコーラルピンクへのグラデーション背景の見出しを作成してください。

- 以下のグラデーションを使用:
  background: linear-gradient(180deg, #c4b5fd 0%, #ddd6fe 20%, #f3e8ff 35%, #fce7f3 50%, #fbcfe8 65%, #fda4af 80%, #fb7185 100%);
- 上から下への7段階グラデーション
- 紫からピンクへの優しい色の変化
- 文字色は濃いピンク(#831843)
- 角丸で柔らかい印象
- ピンク色系の影を付けて立体感を出す

.heading-coral-sunset {
    background: linear-gradient(180deg, #c4b5fd 0%, #ddd6fe 20%, #f3e8ff 35%, #fce7f3 50%, #fbcfe8 65%, #fda4af 80%, #fb7185 100%); /* 7段階グラデーション */
    color: #831843; /* 明るめの背景に濃いピンクの文字 */
    box-shadow: 0 8px 24px rgba(251, 113, 133, 0.3); /* ピンク色の影 */
}

h2要素を使用して、中心から広がるティールブルーの放射状グラデーション背景の見出しを作成してください。

- 以下のグラデーションを使用:
  background: radial-gradient(circle at center, #67e8f9 0%, #22d3ee 30%, #0891b2 60%, #164e63 100%);
- 中心から円形に広がる
- 明るい水色から深いティールへの4段階変化
- 文字色は白色
- 角丸で柔らかい印象
- ティール色の影を付けて立体感を出す

.heading-teal-spot {
    background: radial-gradient(circle at center, #67e8f9 0%, #22d3ee 30%, #0891b2 60%, #164e63 100%); /* 中心から円形放射 */
    color: white; /* 濃い背景に白文字 */
    box-shadow: 0 8px 24px rgba(8, 145, 178, 0.4); /* ティール色の影 */
}

h2要素を使用して、右下から広がるエメラルドグリーンの放射状グラデーション背景の見出しを作成してください。

- 以下のグラデーションを使用:
  background: radial-gradient(circle at bottom right, #6ee7b7 0%, #34d399 25%, #10b981 50%, #059669 75%, #064e3b 100%);
- 右下の角から円形に広がる
- 明るいエメラルドから深い緑へ5段階変化
- 文字色は白色
- 角丸で柔らかい印象
- 緑色の影を付けて立体感を出す

.heading-emerald-glow {
    background: radial-gradient(circle at bottom right, #6ee7b7 0%, #34d399 25%, #10b981 50%, #059669 75%, #064e3b 100%); /* 右下から円形放射 */
    color: white; /* 濃い背景に白文字 */
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4); /* 緑色の影 */
}