色と角度を変えながら背景を作りたいときは、下のジェネレーターを使ってください。直線・放射・円錐の3種類を切り替え、できたCSSをそのままコピーできます。色は2〜5色、補間はsRGBとOKLCHに対応しています。
まずは2色のまま角度を変えると、操作と見た目の関係がつかめます。配色が決まったら「CSSをコピー」を押し、使う要素のCSSルール内へ貼り付けます。
グラデーションを作ってCSSをコピーする
操作パネルが表示されない場合は、JavaScriptを有効にしてページを読み込み直してください。下の初期設定のCSSは、そのままコピーして使えます。
background-color: #2563eb;
background-image: linear-gradient(135deg, #2563eb 0%, #f472b6 100%);
background-image: linear-gradient(135deg in srgb, #2563eb 0%, #f472b6 100%);色はカラーピッカーか、#2563ebのような6桁のHEXで指定します。「位置」は、その色に到達する場所です。追加した色の位置を変えると、途中の色合いを調整できます。入力値はこのページ内で処理し、サーバーへ保存・送信しません。
このツールは不透明な色を使い、放射・円錐の中心を中央に固定しています。透明色、中心位置、複数背景の重ね合わせは生成対象に含めていません。
直線・放射・円錐は、色が進む方向で選ぶ
| 種類 | 色の進み方 | このツールでの調整 |
|---|---|---|
| 直線（linear） | 一本の方向に沿って変化する | 角度で上下・左右・斜めを変える |
| 放射（radial） | 中心から外へ広がる | 色の位置で中心色の広がりを変える。角度は使わない |
| 円錐（conic） | 中心の周りを回るように変化する | 角度で開始位置を回す |
たとえば横長の見出し背景なら、まず直線を選ぶと調整しやすいです。中央だけを明るくしたい場合は放射へ切り替えます。円錐は、中心から外への変化ではなく、時計の針が回る方向の変化です。
linear-gradient()の角度は、0度で上、90度で右、180度で下、270度で左へ進みます。「上から始めたい」なら180度です。角度は開始点の位置ではなく、色が進む向きを表すため、ここを逆に覚えると狙いと反対になります。MDNのlinear-gradient()の角度説明も参照できます。
放射ではcircle at centerを出力します。円の大きさは要素の形にも左右されるので、正方形のプレビューと横長のバナーで見た目が同じになるとは限りません。円錐の0〜100%は中心の周りの一周に対応します。放射グラデーションの仕様と円錐グラデーションの仕様では、それぞれの位置指定を確認できます。
途中の色が気になるときは、位置と補間を分けて動かす
色の「位置」と「補間」は別の調整です。位置を動かすと、どこで指定色に到達するかが変わります。補間を変えると、同じ2色の間をどんな色の経路でつなぐかが変わります。
真ん中の色を長く見せたいなら、同じ色を2か所に置く
青から黄色、ピンクへ変える例なら、黄色を40%と60%に置いてみてください。40〜60%の間が黄色で保たれます。黄色を50%に一つだけ置く場合との違いが、プレビューで分かります。
このツールは、入力した行の順番ではなく、位置の小さい順にCSSを並べます。最後に追加した色を20%にすれば、20%の場所へ入ります。同じ位置に異なる2色を置くと、その位置で色が切り替わる境界を作れます。同じ位置同士では入力行の順番を保ちます。
sRGBとOKLCHは、同じ配色のまま切り替えて比べる
| 見た目の悩み | 最初に試す操作 | その後の確認 |
|---|---|---|
| 途中が暗い、くすんで見える | 色と位置を固定し、sRGBからOKLCHへ切り替える | 望まない色相を通っていないかも見る |
| 中間色が広すぎる、狭すぎる | 補間は固定し、色の位置を動かす | 必要なら同じ色を2か所へ置く |
| 特定の色を必ず通したい | その色を追加する | 追加した色の位置を調整する |
in srgbとin oklchは、色の間を補間する空間の指定です。OKLCHへ変えれば必ず好みの配色になる、というものではありません。色相の変わり方も変わるため、端の色だけでなく途中を見て選びます。このツールではOKLCHの色相経路を個別指定せず、標準の設定を使います。MDNの色補間方法に構文と指定できる空間が載っています。
ここで選ぶHEX自体は変わりません。HSLの色相・彩度・明度を使って元の色を組み立てたいときは、CSSのhsl()で色を指定する方法を参照してください。
繰り返すときは「一組の幅」を小さくする
「繰り返す」をオンにすると、repeating-linear-gradient()などへ切り替わります。「位置の縮小率」が25%なら、入力した0〜100%の位置を0〜25%へ縮めて出力します。最初と最後が0%・100%なら、その一組の幅が25%になります。
たとえば、青0%・ピンク100%を直線で繰り返すと、出力では青0%・ピンク25%になります。次の組では青へ戻るため、つなぎ目が見えます。滑らかにつなぎたいなら、青0%・ピンク50%・青100%のように、両端を同じ色に揃えてください。
位置を20%・80%にした場合、25%へ縮めた後は5%・20%なので、一組の幅は15%です。縮小率の数字が、そのまま繰り返し幅になるとは限りません。最初と最後を同じ位置にすると幅がなくなるため、このツールではコピーを止め、位置を離すよう案内します。
コピーした3行を、使う要素のCSSへ貼る
出力は上から、単色の背景、補間指定なしのグラデーション、選んだ補間方法付きのグラデーションです。最後の指定を解釈できるブラウザでは、最後のグラデーションが使われます。解釈できない場合に備えて、その前の行も残しています。
.hero-banner {
padding: 3rem 1.5rem;
background-color: #2563eb;
background-image: linear-gradient(135deg, #2563eb 0%, #f472b6 100%);
background-image: linear-gradient(135deg in srgb, #2563eb 0%, #f472b6 100%);
}.hero-bannerは使用例です。自分の要素のクラス名へ置き換えてください。ジェネレーターからコピーする3行には、このセレクターや余白指定は含まれません。
グラデーションはCSSでは画像として扱うので、background-colorには入れず、background-imageへ指定します。単色はグラデーションの下に置かれます。後から別のbackground指定で上書きしていないか、要素に高さがあるかも確認してください。
文字を重ねる場合は、文字が載る範囲全体の読みやすさを確認します。背景の一部で白文字が読めても、明るい部分では読みにくくなることがあります。必要なら文字の後ろに単色の面を置きます。このツールは文字色の適否やコントラストを自動判定しません。
最後は、実際に使う要素の縦横比で確認しましょう。背景の別案も探したくなったら、CSS背景デザインのサンプル集で、ドット・格子・斜めの背景と比べられます。