メインコンテンツにスキップ

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%);
  • 中心から外側に色が変化
  • 円形効果を生成
  • スポットライト効果に便利

使用例:

  • 背景装飾
  • ボタンホバー効果
  • ロゴ背景

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);
}

関連ツール​