CSSグラデーションジェネレーター
背景用の美しいグラデーションCSSを作成
基本設定
色と位置
CSSグラデーションジェネレーターの使い方
直感的な操作で、Webサイトの背景などに使えるグラデーションCSSを作成します。
タイプと角度の選択
グラデーションの種類（線形・円形）と、流れる方向（角度）を決めます。
色の調整
開始色と終了色を選びます。「色を追加」ボタンで中間色を増やすこともできます。
コードのコピー
プレビューで確認し、生成されたCSSコードをコピーして利用します。
「のっぺり・濁る」グラデーションを卒業する3つのコツ
同じHEXコードでも、書き方ひとつで印象は大きく変わります。ツールで叩き台を作ったあと、この3点を仕上げに加えると一段プロっぽくなります。
① 補間色空間を OKLCH に切り替える
既定の sRGB 補間は、色相の離れた2色をつなぐと中間の彩度が落ち、灰色っぽく「濁り」ます。 CSS Color Module Level 4 で追加された in oklch を使うと、色相環を経由して補間されるため、 彩度を保ったまま自然に遷移します。
/* 濁りやすい書き方 */
background: linear-gradient(90deg, #2196f3, #ffeb3b);
/* OKLCH 補間で彩度を保つ（モダンブラウザ） */
background: linear-gradient(in oklch 90deg, #2196f3, #ffeb3b);② 距離が長い2色には「中間ストップ」を挟む
レガシーブラウザ対応が必要で in oklch が使えない場合は、色相環を時計回りに辿る中間色を 1〜2個明示的に挟むのが確実です。青→黄なら間に「青紫」「ピンク」を足すだけで濁りが消えます。 本ツールの「色を追加」ボタンで中間ストップを増やせます。
③ 線形・円形・円錐を意図で使い分ける
| 関数 | 向いている用途 |
|---|---|
linear-gradient | 背景の方向感、ボタンの陰影（本ツールの「線形」） |
radial-gradient | スポットライト、中心への注目誘導（本ツールの「円形」） |
conic-gradient | ドーナツ型チャート、虹色の装飾。手書きで conic-gradient(from 0deg, ...) に置き換えて流用 |
実際の使用例
Instagram風の鮮やかグラデ
人気アプリのような、暖色から寒色へ流れる鮮やかなグラデーション。5色を等間隔で配置します。
INPUT
45deg / Orange → Red → Pink → Purple（5色）
OUTPUT
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
上品なボタン用（明度差ひかえめ）
同系色で明度だけを少し変え、押したくなる立体感を演出。UIパーツはこのくらい控えめが自然です。
INPUT
180deg / 明るい藍 → 濃い藍
OUTPUT
background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
中心が光るスポットライト（円形）
radial-gradient で中央から外側へ暗くすると、視線を中心へ集めるスポットライト効果になります。
INPUT
circle / 中央=明 → 外側=暗
OUTPUT
background: radial-gradient(circle, #fde68a 0%, #b45309 100%);
よくある質問
生成されるコードはどのブラウザに対応していますか？
現代の主要なモダンブラウザ（Chrome, Firefox, Safari, Edge など）で動作する標準的な構文（linear-gradient / radial-gradient）を出力しています。これらはベンダープレフィックス（-webkit- など）なしで動作するため、そのまま貼り付けて利用できます。非常に古いブラウザ（Internet Explorer 等）は考慮していません。
円錐グラデーション（conic-gradient）は作れますか？
本ツールは線形（linear）と円形（radial）に対応しています。ドーナツ型チャートや虹色の装飾で使う conic-gradient は、生成した色の組み合わせをベースに background: conic-gradient(from 0deg, ...) と手書きで置き換えると流用できます。詳しい書き方は下部の解説と関連コラムを参照してください。
グラデーションの中間が灰色っぽく濁るのはなぜですか？
既定の sRGB 補間では、色相の離れた2色（例: 青と黄）を直接つなぐと中間の彩度が落ちて灰色に沈むためです。中間に色を1つ追加するか、linear-gradient(in oklch, ...) のように補間色空間を OKLCH / HSL に切り替えると、彩度を保ったまま自然に遷移します。
半透明のグラデーション（オーバーレイ）は作れますか？
カラーピッカーは不透明色を扱いますが、生成後のコードの色を rgba(0,0,0,0.5) のような記法に置き換えれば半透明グラデーションになります。写真の上に重ねて文字を読みやすくするオーバーレイなどに便利です。
画像としてダウンロードはできますか？
現在は CSS コードの生成のみに対応しています。画像として保存したい場合は、生成したコードを適用した要素のスクリーンショットをご利用ください。
役立つTips
ボタンやカードの背景に
単色の背景よりも、隣り合う明度差の小さい2色で浅くグラデーションをかけると、モダンで奥行きのあるデザインになります。色差を付けすぎると「安っぽく」見えるので控えめに。
写真オーバーレイで可読性を確保
写真の上に半透明の黒グラデーション（rgba指定）を重ねると、白文字が読みやすくなります。「下半分だけ濃くする」と、上部の被写体を隠さず文字も読めます。
濁ったら中間色を1つ足す
青→黄のように色相が遠い2色は中間が灰色に沈みがち。色相環を辿る中間色（青紫やピンクなど）を1つ挟むだけで、濁りが解消して鮮やかになります。
角度の基準を覚えておく
linear-gradient の角度は「0deg=下から上」「90deg=左から右」「180deg=上から下」。斜めに流したいときは 45deg / 135deg が扱いやすい定番です。