Developer Tools
Web Utilities
Image Toolsグラデーションジェネレーター
美しいCSSグラデーションをビジュアルに作成。複数のカラーストップで線形・放射・円錐グラデーションを生成。すぐに使えるCSSコードをコピー。
グラデーション設定
プレビューとCSSコード
.gradient-element {
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}linear-gradient(90deg, #667eea 0%, #764ba2 100%)関連ツール
CSSグラデーションジェネレーターについて
使い方
- 線形・放射状・円錐グラデーションタイプから選択
- 複数のカラーストップを追加して正確に配置
- グラデーションの角度・形状・方向をカスタマイズ
- 設定を調整しながらリアルタイムでプレビュー
- プロジェクトで使用するCSSコードをコピー
- 美しいプリセットグラデーションから素早く選択
主な用途
- ウェブサイト向けの印象的なグラデーション背景を作成
- ボタンやカードの魅力的な背景をデザイン
- グラデーションオーバーレイでモダンなUI要素を構築
- ヒーローセクション用のカラートランジションを生成
- ブランディング向けの色の組み合わせを実験
- CSSグラデーションの構文とプロパティを学習
よくある質問
このツールでどんな種類のCSSグラデーションを作成できますか？
このツールはCSSグラデーションの3種類すべてをサポートします：線形（直線的な色の遷移）、放射状（中心点からの円形または楕円形の遷移）、円錐（中心点の周りを回転する遷移）。各タイプには方向、形状、カラーストップのカスタマイズ設定があります。
グラデーションに複数の色を追加するには？
「+ ストップを追加」ボタンをクリックしてカラーストップを追加します。各ストップはカラーピッカーやHex入力で色を、位置（0-100%）を設定できます。
線形グラデーションの方向を制御するには？
線形グラデーションの場合、角度スライダーで0〜360度の方向を制御します。0°は下から上、90°は左から右、180°は上から下、270°は右から左のグラデーションを作成します。
放射グラデーションの円形と楕円の違いは何ですか？
放射グラデーションでは、「円形」は要素の寸法に関わらず完全に円形のグラデーションを作成し、「楕円」は要素のアスペクト比に合わせた楕円形のグラデーションを作成します。
放射グラデーションを異なる領域に配置できますか？
はい！放射グラデーションは中央、上部、下部、左、右、または任意の角に配置できます。これにより要素内でグラデーションが始まる位置を制御します。
プリセットグラデーションの使い方は？
サンセット、オーシャン、フォレスト、キャンディ、ファイア、パープル、オーロラなど20種類の美しいプリセットグラデーションが含まれています。プリセットボタンをクリックするだけで即座に適用できます。
グラデーションのCSSコードをコピーするには？
2つのコピーオプションがあります：「CSSをコピー」はセレクタを含む完全なCSSルールを、「値をコピー」はどのCSSプロパティにも使えるグラデーション値のみを提供します。
必要なカラーストップの最小数は？
グラデーションには最低2つのカラーストップが必要です。2つしか残っていない場合はストップを削除できません。
これらのグラデーションは背景にのみ使用できますか？
グラデーションは背景によく使われますが、background-image、border-image、mask-imageなど多くのCSSプロパティに適用できます。
円錐グラデーションはどのように機能しますか？
円錐グラデーションはカラーホイールのように中心点の周りを円形に回転しながら色が変化します。角度設定でグラデーションの開始位置を制御します。
生成されたグラデーションはすべてのブラウザと互換性がありますか？
はい、CSSグラデーションはChrome、Firefox、Safari、Edgeやモバイルブラウザを含むすべての現代的なブラウザで十分にサポートされています。
カラーストップを追加後に編集できますか？
もちろんです！各カラーストップはいつでも編集できます。変更はプレビューに即座に反映されます。