CSS グラデーションジェネレーター
CSSグラデーションをビジュアルで生成。線形・放射状・コニックの3タイプ。角度・位置・最大6色のカラーストップをリアルタイムプレビューで調整。無料オンラインツール。
使い方
- 上部のタブでグラデーションタイプを選択します——線形、放射状、またはコニック。
- 線形：角度スライダーをドラッグするか、0〜360度の値を入力します。方向ボタン（上 / 右 / 下 / 左）で素早く設定できます。
- 放射状：ドロップダウンから形状（円形または楕円）と中心位置を選択します。
- コニック：スライダーで開始角度を設定し、中心位置を選択します。
- カラーストップセクションで、カラースウォッチをクリックするか16進数値を入力して各ストップの色を変更します。パーセンテージを調整してグラデーション内の位置を制御します。
- + 追加をクリックしてストップを追加（最大6個）、または×で削除（最小2個）します。
- プレビュー矩形が変更に応じてリアルタイムで更新されます。
- コピーをクリックしてCSSルールをクリップボードにコピーします。
生成されたCSSについて
出力は .gradient クラスに background プロパティを設定します。線形グラデーションでは角度が方向を制御します——0degは上から下、90degは左から右です。
放射状グラデーションでは、色リストの前に形状と位置が指定されます。コニックグラデーションでは、fromが開始角度、atが旋回の中心を設定します。
主な用途
CSSグラデーションはヒーローセクションの背景、カードヘッダー、ボタンの塗りつぶし、プログレスバー、装飾的なオーバーレイ、テキスト塗りつぶし（background-clip: text）などに使われます。
コニックグラデーションは純粋なCSSによる円グラフやカラーホイールピッカーに特に便利です。
FAQ
線形・放射状・コニックグラデーションの違いは何ですか？
線形グラデーションは角度で定義された直線に沿って色が遷移します。放射状グラデーションは中心点から円形または楕円形に外側へ広がります。コニックグラデーションは指定した角度から始まり、カラーホイールのように中心点の周りを色が旋回します。
生成したCSSグラデーションはどう使いますか？
生成されたCSSをコピーしてスタイルシートに貼り付けます。出力は .gradient クラスに background プロパティを設定します。クラス名を自分の要素名に変更し、グラデーションが必要な場所—divやボタンなどのブロック要素—に適用してください。
カラーストップを3色以上追加できますか？
はい。「追加」ボタンをクリックしてカラーストップを追加できます（最大6個）。各ストップには独自のカラーピッカー、16進数入力、位置パーセンテージがあります。パーセンテージ値を調整して、グラデーション内の各色の開始・終了位置を制御できます。
カラーストップの位置パーセンテージとは何ですか？
パーセンテージは、グラデーション内でその色が完全に表示される位置を定義します。0%が始点、100%が終点です。中間のストップはブレンドを制御します。隣接する2つのストップを同じパーセンテージに設定すると、遷移のないハードなカラーエッジが作成されます。
グラデーション画像よりCSSグラデーションが優れている点は？
CSSグラデーションは解像度に依存せず、あらゆる表示密度で完璧にスケーリングし、HTTPリクエストを追加せず、CSSでアニメーションやトランジションができます。値をいくつか変更するだけで更新でき、画像の場合は毎回外部ツールで再生成が必要です。