グラデーションジェネレーター
無料のオンラインCSSグラデーションジェネレーター。ライブプレビュー付きで、線形、放射状、円錐グラデーションを作成。CSSコードを即座にコピー可能。
ビジュアルで美しいCSSグラデーションを作成 — 線形、放射状、円錐で完全カスタマイズ可能。
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);無料CSSグラデーションジェネレータ — ラインア、ラジアル、コニックグラデーションの作成
この無料オンライングラデーションジェネレータを使って美しいCSSグラデーションをデザイン。線ア、ラジアル、コニックグラデーションの3種類から選択し、色や角度をカスタマイズし、CSSコードを即座にコピーできます。
CSSグラデーションとは？
CSSグラデーションとは、backgroundプロパティを使って作成される、2つ以上の色の間の滑らかな移行です。グラデーションは画像ファイルの必要性をなくし、ページの読み込み時間を短縮し、完全に応答性があり、解像度に依存しない背景を可能にします。
CSSグラデーションには主に3つのタイプがあります：
- 線アグラデーションは、角度または方向で定義される直線上で色を移行します。
- ラジアルグラデーションは、中心点から外へ放射状に広がり、円形または楕円形のパターンを作成します。
- コニックグラデーションは、中心点の周りで回転しながら色を移行し、色輪に似たパターンを作成します。
このグラデーションジェネレータの使い方
- グラデーションタイプの選択 — コントロールパネルの上部で、線ア、ラジアル、またはコニックを選択します。
- 方向の設定 — 線アおよびコニックグラデーションでは、スライダーまたはクイックセレクトボタンを使って角度を調整します。
- ラジアルオプションのカスタマイズ — ラジアルグラデーションでは、形状（円または楕円）とサイズキーワードを選択します。
- カラーストップの編集 — カラーピッカーをクリックして各ストップの色を変更し、ポジションスライダーをドラッグして各色が表示される位置を調整します。
- 色の追加または削除 — 「色を追加」ボタンを使用してより多くのストップ（最大8つ）を追加したり、Xをクリックしてストップを削除（最小2つ）したりします。
- プリセットの使用 — 任意のプリセットスウォッチをクリックして、即座に作成済みグラデーションをロードします。
- CSSのコピー — 「CSSをコピー」をクリックして、完全な
backgroundプロパティをクリップボードにコピーします。
主な機能
| 機能 | 利点 |
|---|---|
| 3つのグラデーションタイプ | 線ア、ラジアル、コニック — すべてのCSSグラデーションモードがサポート |
| リアルタイムプレビュー | 設定を調整するたびにグラデーションをリアルタイムで表示 |
| 最大8つのカラーストップ | 精密な位置指定で複雑なマルチカラーのグラデーションを作成 |
| 角度制御 | スライダー＋クイックセレクトボタンで一般的な角度（0°–315°）を調整 |
| ラジアル形状とサイズ | 円／楕円の形状と4つのCSSサイズキーワード |
| クリックでプリセット | 6つのキュレーション済みグラデーションプリセットですぐに開始 |
| CSSコードのコピー | 1クリックで本番用のCSSコードをクリップボードにコピー |
| データ送信なし | すべてがブラウザ内で動作 — サーバーなし、トラッキングなし |
グラデーションタイプの比較
| プロパティ | 線ア | ラジアル | コニック |
|---|---|---|---|
| 方向 | 角度（0–360°） | 形状＋サイズキーワード | 開始角度 |
| パターン | 直線 | 中心点からの円または楕円 | 回転スキャン |
| 最適な用途 | 背景、バナー、ボタン | スポットライト、オーブ、抽象芸術 | ピーチャート、カラーワール、時計 |
| CSS関数 | linear-gradient() |
radial-gradient() |
conic-gradient() |
実際の使用例
ウェブサイト背景
平らな色を微妙なグラデーションに置き換えて、モダンでプロフェッショナルなページをデザイン。135°の線アグラデーションで2つの近い色を使用し、深みを加えつつも邪魔しないようにします。
ボタンとCTA
明るいグラデーションでCTAボタンを際立たせます。180°（上から下）のグラデーションで自然な光から影への効果を作成します。
ヒーローセクション
3つ以上の色を組み合わせて、独自のブランドイメージを持つ大胆なマルチストップグラデーションでヒーローバナーを作成します。
オーバーレイとカード
画像の上に半透明のグラデーションを適用し、テキストの読みやすさを保ちつつも視覚的な興味を維持します。
データ可視化
JavaScriptやSVGを必要とせず、コニックグラデーションを使って単純なピーチャート、プログレスリング、またはカラーワールを作成します。
グラデーションをより良くするためのヒント
- 2〜3色に限定して、洗練されたプロフェッショナルなデザインを作成。より多くのストップも可能ですが、慎重な調整が必要です。
- 類似した色調を使用して、繊細なグラデーション（例：薄い青から濃い青）を作成し、補色を使用して大胆なグラデーションを作成します。
- レイアウトに合わせた角度の選択 — 垂直セクションには180°、水平バーには90°が適しています。
- ダークモードとライトモードでテスト — 白背景で美しいグラデーションでも、ダークモードでは調整が必要かもしれません。
background-sizeとbackground-repeatを使用して、小さなグラデーションをパターンにタイル化します。- 透過性との組み合わせ —
rgba()色を使用して、背景コンテンツと融合するグラデーションを作成します。
CSSグラデーション構文の理解
基本的な線アグラデーション：
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
形状とサイズを指定したラジアルグラデーション：
background: radial-gradient(circle farthest-corner, #667eea 0%, #764ba2 100%);
コニックグラデーション：
background: conic-gradient(from 0deg, #667eea 0%, #764ba2 50%, #667eea 100%);
すべての現代的なブラウザは、ベンダー接頭辞なしでこれらのグラデーションタイプをサポートしています。
頻繁に寄せられる質問
CSSグラデーションに使用できる色はいくつですか？
CSSは任意の数のカラーストップをサポートしています。このツールでは実用上最大8つを許可しています。実際のプロジェクトでは2〜4つのストップが一般的です。
線アグラデーションとラジアルグラデーションの違いは何ですか？
線アグラデーションは指定された角度で直線に沿って色を移行します。ラジアルグラデーションは中心点から円形または楕円形に広がって色を移行します。
CSSグラデーションはすべてのブラウザで動作しますか？
はい。すべての現代的なブラウザ（Chrome、Firefox、Safari、Edge）は、linear-gradient、radial-gradient、conic-gradientをベンダー接頭辞なしで完全にサポートしています。
CSSグラデーションをアニメーション化できますか？
CSSは直接transitionを使ってグラデーション値の間をアニメーション化することはできません。ただし、background-positionを使ってグラデーションの位置をアニメーション化したり、サポートブラウザではCSSの@propertyを使ってカスタムプロパティのアニメーションを作成したりできます。
透明なグラデーションを作成するにはどうすればよいですか？
rgba()またはhsla()の色値とアルファチャネルを使用します。たとえば、rgba(102, 126, 234, 0.5)はその色の半透明なバージョンを作成します。
このツールは私のグラデーションデータを保存しますか？
いいえ。すべてのグラデーション生成はあなたのブラウザ内で完全に実行されます。サーバーにデータは送信されません。