CSSグラデーションジェネレーター
カラーノードをドラッグして位置を調整し、好みのCSSグラデーションコードを生成できる無料ツールです。線形・放射状・扇形の3タイプに対応し、中間色の濁りを防ぐOklab補間やテキスト視認性チェック機能も搭載しています。入力データはサーバーに送信されず、ブラウザ内で完結して処理されます。
CSSコードから読み込み
解析できませんでした。対応形式を確認してください。
対応：linear-gradient / radial-gradient / conic-gradient、HEXカラー（#fff / #ffffff）、パーセント位置指定
非対応：rgb() / hsl() / named color（red等）、ベンダープレフィックス（-webkit-）、Oklabで挿入した中間ストップ
位置: 0%
生成されたCSS
プリセット
CSSグラデーションジェネレーターとは？
CSSグラデーションジェネレーターは、カラーノードをドラッグ操作して位置を調整しながらWebサイトに貼り付けて使えるCSSコードを自動生成するツールです。線形（linear-gradient）・放射状（radial-gradient）・扇形（conic-gradient）の3種類に対応し、ノードは最大6個まで追加できます。中間色が灰色っぽく濁るのを防ぐ「Oklab補間」機能や、グラデーション上のテキスト視認性をWCAG基準で判定する機能も搭載しており、デザイナーからコーダーまで実務で即使えるツールを目指しています。
各機能の説明
-
グラデーションバー（ノード操作）プレビュー下のカラーバー上でノードをドラッグして色の位置を自由に調整できます。ノードをクリックすると選択状態になり、下の色・HEX入力欄で色を変更できます。選択中のノードは「削除」ボタンで削除（最小2個まで）、「ノード追加」ボタンまたはバー上の空きエリアのクリックで最大6個まで追加できます。
-
カラーピッカー＋HEX入力選択中のノードの色をカラーピッカーで直感的に選べます。HEX値の直接入力にも対応しており、デザインツールからコピーしたカラーコードをそのまま貼り付けて使えます。
-
ランダム生成ノード数（2〜4個）・色・位置をすべてランダムで生成します。配色のヒントを探したいときや、アイデア出しのきっかけとして活用できます。
-
放射状の中心位置指定放射状グラデーション選択時はプレビュー上に9点グリッドが表示され、グラデーションの中心位置をクリックで指定できます。
-
Oklab補間（濁り防止）チェックを入れると中間色の計算をOklabカラー空間で行い、中間が灰色っぽく濁るのを防ぎます。赤→青、緑→紫など補色方向の組み合わせで特に効果的です。
-
テキスト視認性チェックカラーピッカーまたはHEX入力でテキストカラーを指定してグラデーション上に重ね、実際の見え方を確認できます。デフォルトは白（#ffffff）です。
-
CSS / CSS変数 / Tailwind 出力タブ切り替えで、標準CSSのほかにCSS変数形式やTailwindのクラス名形式でも出力できます。プロジェクトのコーディング方針に合わせて使い分けられます。
グラデーションの種類について
-
線形（linear-gradient）色が一方向に流れる最も基本的なタイプです。角度スライダーで方向を0°〜360°で調整できます。背景・ボタン・バナーなど幅広い用途で使われます。
-
放射状（radial-gradient）中心点から外側へ同心円状に色が広がるタイプです。プレビュー上の9点グリッドで中心位置を指定できます。スポットライト効果や奥行き感の演出に有効です。
-
扇形（conic-gradient）中心を軸に色が扇状・円状に変化するタイプです。開始角度をスライダーで調整できます。円グラフ風のデザインやカラーホイール的な表現に使われます。
-
Oklabカラー補間とは通常のsRGBベースのグラデーションは、補色間（赤→緑など）を通過するときに中間が灰色・茶色っぽくなる現象（濁り）が起きます。OklabはCSSで採用された知覚的に均一なカラーモデルで補間するため、中間色も彩度を保ちながら滑らかに変化します。本ツールでは中間ストップを自動計算してCSSコードに挿入します。
こんなときに使う
-
ヒーローセクションやバナーの背景多色グラデーションをドラッグ操作で素早く作成してCSSを取得できます。ランダム生成で配色のアイデア出しもできます。
-
ボタンやカードのアクセントカラーUIコンポーネントのグラデーション配色をその場で調整してコードを取得できます。CSS変数出力を使えばデザインシステムへの組み込みもスムーズです。
-
補色グラデーションを濁らせたくないときOklab補間をオンにすることで、赤→青・緑→紫など通常は中間が濁りがちな組み合わせでも彩度を保ったグラデーションが生成できます。
-
アクセシビリティを確認しながら配色を決めたいテキスト視認性チェックで、任意のカラーのテキストをグラデーション上に重ねて表示し、実際の見え方をデザイン段階で確認できます。
-
虹・メタリックなど多色グラデーションを作りたいノードを6個まで追加できるため、虹のような多色グラデーションや、メタリック感を出す中間ハイライトの挿入も可能です。プリセットからワンクリックで呼び出すこともできます。
よくある質問
-
Oklab補間をオンにすると何が変わりますか？
通常のCSSグラデーションはsRGB空間で補間するため、補色方向（赤→青、緑→紫など）では中間が灰色っぽくなりやすいです。Oklabは人の視覚に近いカラーモデルで補間するため、中間色の彩度が維持されます。本ツールではOklab空間で計算した中間ストップを自動挿入した標準CSSコードを出力します。
-
ノードは何個まで追加できますか？
最大6個まで追加できます。最小は2個で、2個のときは「削除」ボタンが非表示になります。「ノード追加」ボタン、またはグラデーションバー上の空きエリアをクリックしてもノードを追加できます。追加されたノードの色はクリック位置の補間色が自動設定されます。
-
テキスト視認性チェックの判定はどのように行われますか？
カラーピッカーまたはHEX値で指定した色のテキストをグラデーション上に重ねて表示します。グラデーションは場所によって色が変わるため、数値による自動判定は行わず、実際の見え方を目視で確認する形にしています。
-
生成されたCSSをそのままコピーして使えますか？
はい、生成されるCSSはベンダープレフィックスなしのクリーンなコードです。現代のブラウザ（Chrome・Firefox・Safari・Edge）は標準CSSのgradient関数を広くサポートしているため、そのまま貼り付けてご利用いただけます。Oklab補間オンの場合も中間ストップを挿入した標準CSSで出力されます。
-
放射状グラデーションの中心位置はどう指定しますか？
種類を「放射状」に切り替えると、プレビューエリア上に9点グリッドが表示されます。左上・上中央・右上・左中央・中央・右中央・左下・下中央・右下の9点からクリックで選択でき、選択した位置がCSSの at キーワードに反映されます。
コードをコピーする前に、制作中ファイルのバックアップをお取りください。