ランダムグラデーションジェネレーター

ボタン1回でグラデーション9個、中間がくすまないCSSとPNG

ランダムグラデーションジェネレーターは、「新しいグラデーション」を押すかSpaceキーを押すたびに、大きなステージのメイングラデーション1個と、横に並ぶ候補8個をまとめて生成します。候補を押すとステージと入れ替わるので、1つずつ送りながら見るより素早く比べられます。気に入った色は鍵で固定でき、形は線形、円形、扇形(コニック)、メッシュから選ぶか、ランダムに任せられます。

このジェネレーターが特に気を配っているのは、色の混ぜ方です。HEXだけで書いたCSSグラデーションは、後方互換性のためsRGBの値をそのまま混ぜます。そのため、青(#0000FF)から黄(#FFFF00)へのグラデーションは、中間がグレーの#808080になります。このツールは既定でOKLCHで混ぜるCSSの行を出し、その行を知らない古いブラウザー向けのsRGBの行を前に添えます。結果はCSSとしてコピーするか、デスクトップやスマホのサイズのPNGとして保存できます。

どんなときに使うか

• サイトのファーストビューやバナーの背景を決めるとき: 「使ってみる」でグラデーションをファーストビューの例にそのまま適用し、白文字と黒文字のどちらを載せれば読めるかを、コントラストの数値で確認します。
• 壁紙やスライドの背景画像が必要なとき: 気に入ったグラデーションを、1920×1080、4K、縦長の1080×1920などのサイズでPNGに保存します。サイズは幅と高さの欄に直接入力することもできます。
• ブランドカラー1色に合うグラデーションを探すとき: その色を含むグラデーションをリンクで読み込み、鍵で固定して配色ルールを選ぶと、固定した色の色相角を基準に残りの色が決まります。
• ボタンや文字の強調に使う色を選ぶとき: グラデーション文字、塗りのボタン、枠線カードの見え方を並べて表示するので、広い背景ではなく小さな要素での印象も事前に確認できます。

使い方

1. 生成する: 「新しいグラデーション」ボタンかSpaceキーを押します。Spaceキーは、ステージが画面に表示されていて、入力欄やボタンにフォーカスがないときだけ働きます。
2. 選ぶ: 候補8個のうち気に入ったものを押すとステージに上がり、ステージにあったグラデーションはその位置に下がります。
3. 固定する: カラーストップ欄の鍵を押した色は、次の生成でも同じ順番の位置に残ります。「形と角度を固定」をオンにすると、形、角度、中心、メッシュの点の位置はそのままで、色だけが変わります。
4. 設定を変える: 形、配色ルール、色数、トーンを変えると、その設定ですぐに生成し直します。補間方式と角度のスライダーは、色を引き直さず、現在のグラデーションだけを変えます。
5. 持ち出す: 「CSSをコピー」で2行のbackground宣言を、「リンクをコピー」で現在のグラデーションを含むURLをコピーします。「PNGで保存」は、選んだサイズで画像を作ってダウンロードします。最近の20個は、このブラウザーにだけ残ります。

色と形の決め方

色はOKLCHで決めます。OKLCHは、Björn Ottossonが人間の知覚する明るさと色の差に合わせて作ったOklabを、明度(L)、彩度(C)、色相角(H)で書き直したものです。まず配色ルールでカラーストップごとの色相角を決め、トーンの範囲から明度と彩度を選びます。明度は最初のストップから最後のストップへ一方向に流れるようにし(±0.03のゆらぎ)、向きはランダムに決めるので、グラデーションに明るい側と暗い側ができます。選んだ色がsRGBで表示できない範囲なら、明度と色相角はそのままで彩度だけを下げます。

形もランダムに決めます。線形は角度を15°刻みで、円形は中心を横・縦それぞれ0、25、50、75、100%の中から、扇形(コニック)は中心を25、50、75%の中から選び、開始角を15°刻みで決めます。メッシュは最初の色を下地に敷き、残りの色ごとに点を1つずつ置きます。点の位置は5%刻み、広がる半径はボックスサイズの50〜80%です。固定した色が有彩色なら、その色の色相角がルールの基準になります。

中間がグレーになる理由と補間方式

CSS Color 4は、補間する色空間を指定しなければOklabで混ぜると定めています。ただし後方互換性のため、HEX、rgb()、hsl()のような従来のsRGB表記だけを使った場合は、ガンマエンコードされたsRGBで混ぜることになっています。グラデーションのコードの大半はHEXで書かれているので、実際にはsRGBで混ぜられる場合が多くなります。sRGBで補色どうしを混ぜると、赤、緑、青の値が中間で近い値になり、グレーになります。

3つの方式は性格が異なります。OKLabは明るさを均等につなぎます。青(L 0.452)と黄(L 0.968)の中間の明度0.709は2つの値の平均とほぼ同じで、sRGBの0.600のように中間が暗く沈むことはありません。ただし色相環の反対側へまっすぐ通り抜けるため、彩度は依然としてかなり下がります。OKLCHは色相角を短いほうへ回りながら彩度を保つので、中間が鮮やかです。その代わり、青から黄へ向かうときにシアン系の色を通るように、両端にはなかった色が中間に現れます。

ルールごとに2色のグラデーションを1万個ずつ生成し(標準トーン、固定シード)、グラデーションの中で最もくすむ箇所の彩度が、ストップ色の彩度の半分を下回る割合を数えると、下の表のとおりです。色相角が150°以上離れる補色とスプリット補色は、sRGBとOKLabのどちらでも大半の中間がくすみ、OKLCHだけがそうなりません。このためこのツールはOKLCHを既定にし、「使ってみる」の下の帯と彩度曲線で、3つの方式を同じ色で並べて比べられるようにしています。

CSSの書き方とブラウザー対応

コピーされるCSSは、形ごとに次の書式です。カラーストップの位置は書かず、CSS既定の均等配置を使います。

• 線形: linear-gradient(135deg in oklch, #FFC9A3, #F7849F, #A08AF0)。CSS Images仕様では、0degが上向き、90degが右向きで、角度が大きくなるほど時計回りに回ります。グラデーション線の長さは、ボックスの幅W、高さHから abs(W·sinA) + abs(H·cosA) です。
• 円形: radial-gradient(circle at 25% 75% in oklch, …)。サイズを書かなければ、中心から最も遠い角までが終端(farthest-corner)です。
• 扇形(コニック): conic-gradient(from 45deg at 50% 50% in oklch, A, B, C, A)。開始角の0degは上向きで、時計回りに回ります。最初の色を末尾にもう一度書いて、1周した位置に継ぎ目ができないようにしています。
• メッシュ: 最初の色を背景色に置き、残りの色ごとに radial-gradient(60% 60% at 20% 30%, #色, #色00) のように、同じ色の透明度0で終わる楕円を重ねます。色は変わらず透明度だけが変わるため、補間方式の影響を受けず、in は書きません。
• 白・黒・グレーのストップ色:OKLCHの行では、oklch(1 0.002 264.05)のように目に見えない彩度0.002と隣の色の色相角を付けて書き、両隣の色相角が違う場合は同じ位置に2回書きます。仕様では無彩色の色相角は隣の色に従いますが、彩度0と書くとChromeが色相角を別に扱い、中間の色が変わることを2026-10-20に確認しました。

補間色空間を知らないブラウザーは、in oklch を含む宣言全体を捨てます。そのため、コピーされるCSSでは、sRGBで混ぜる行を先に、OKLCHやOKLabの行を後に置きます。新しいブラウザーは後ろの行を、古いブラウザーは前の行を使います。順番を入れ替えると、新しいブラウザーでもsRGBの行が優先されてしまいます。

グラデーションの上に文字を載せるとき

WCAG 2.2の達成基準1.4.3は、本文の文字と背景のコントラスト比を4.5:1以上、大きな文字(18ptまたは太字14pt以上)は3:1以上と求めています。解説文書にはグラデーション専用の規則はなく、達成方法G18は、文字とその背後の背景とのコントラストを見るよう求めています。グラデーションは場所ごとに背景色が違うため、このツールはストップ色と、グラデーションラインを1,024段階に分けたすべての色(メッシュは横128マスの格子と各点の中心)と比べた最も低いコントラストを、白文字と黒文字のそれぞれについて表示します。線形・円形・扇形は中心が枠の中にあり、グラデーションラインのすべての位置が画面のどこかに現れるため、画面の比率にかかわらず、この値が画面全体で最も低いコントラストになります。コントラスト比は小数第1位で切り捨てて表示し、その値で判定するので、4.48:1を4.5:1に切り上げて合格にすることはありません。

トーンごとに3色のグラデーション5,000個(OKLCHで補間、固定シード)を数えた値です。標準トーンは明度の幅が0.50〜0.90と広いため、明るい端では白文字が、暗い端では黒文字が4.5:1を超えられません。文字を載せる背景なら、パステル(黒文字)か暗め(白文字)のトーンから生成するほうが近道です。ファーストビューの例であるピーチ → ピンク → ラベンダーのグラデーションは、白文字が1.4:1、黒文字が7.3:1です。

PNGで保存する

幅と高さは、16〜4096pxの整数で直接入力することもできます。PNGはサーバーに送らず、ブラウザー上で1画素ずつ計算して描画します。線形のグラデーション線の長さ、円形のfarthest-corner、扇形の角度、メッシュの重なりをCSSと同じ式で計算し、補間方式も選んだものをそのまま使います。広い面に緩やかなグラデーションを8ビットの色で収めると、階段状の帯(バンディング)が見えやすくなるため、チャンネルごとに±0.5段階の小さな乱数を足してから丸める処理(ディザリング)を入れています。

画像の比率がステージと違うと、同じCSSでも形が少し変わります。たとえば90°(左 → 右)の線形グラデーションは、線の長さがボックスの幅と等しいので、幅1920pxの画像では、幅1080pxの画像より色がゆっくり変わります。

よくある間違い

• 角度を数学の角度として読む: CSSの0degは上向きです。数学のように0°を右向きと考えると、向きが90°ずれます。
• OKLCHの行だけを貼り付ける: 補間色空間を知らないブラウザーでは、背景がまるごと消えます。sRGBの行を前に添えてください。
• sRGBの行とOKLCHの行の順番を入れ替える: 後ろに書いた宣言が優先されるため、sRGBの行を後ろに置くと、新しいブラウザーでも中間がくすんで見えます。
• コニックグラデーションの継ぎ目: 最後の色が最初の色と違うと、上向きの0degの位置に鋭い境目ができます。最初の色を末尾に書き足すとつながります。
• 文字のコントラストを1点だけで測る: グラデーションの明るい端では合格でも、暗い端では不足していることがあります。文字が載りうる範囲全体で、最も低い値を見てください。

制限と注意点

• ランダムなので、同じ設定でも毎回違う結果になります。過去の結果は、リンクか最近の20個の履歴からしか呼び戻せず、履歴はこのブラウザーにだけ保存されます(以前の版の履歴10個は、最初に1回だけ移行します)。
• 混ぜた色がsRGBの範囲を外れた場合は、チャンネルごとに切り詰めて計算します。ブラウザーが別の方法で収めると、画面とPNGの色が少し違うことがあります。
• カラーストップの位置は均等配置のみです。ストップの位置や色を1つずつ調整したい場合は、CSSグラデーションジェネレーターのほうが向いています。
• 文字のコントラストは、白文字と黒文字について、グラデーション全体での最も低い値だけを見ます。実際の文字の位置、太さ、影、色覚の違いは反映しません。
• PNGは1辺4096pxまで作れます。スマホでは、大きな画像を描くのに数秒かかることがあります。

基準日 CSS仕様、ブラウザー対応、WCAGの出典は2026-10-20に確認しました。表の割合は、このツールの生成ルールで実際に数えた値です。

出典

• 01W3C: CSS Images Module Level 3§3.1.1 0degは上向き、90degは右向き、グラデーション線の長さ abs(W·sinA) + abs(H·cosA)、§3.2 円形サイズの既定値farthest-corner
• 02W3C: CSS Images Module Level 4線形、円形、扇形(コニック)の構文における補間色空間の指定、コニックの開始角0degは上向きで時計回り、指定がなければOklab
• 03W3C: CSS Color Module Level 4§13 補間: 従来のsRGB表記だけを使うとガンマエンコードされたsRGBで混ぜる、アルファはpremultiplied、極座標の色相角の既定はshorter
• 04Björn Ottosson: A perceptual color space for image processingOklabの定義とsRGBへの変換行列(2020-12-23)
• 05MDN: linear-gradient()ブラウザー互換性表: 補間色空間の指定はChrome・Edge 111、Firefox 127、Safari 16.2
• 06MDN: conic-gradient()ブラウザー互換性表: Chrome 69、Edge 79、Firefox 83、Safari 12.1
• 07W3C: WCAG 2.21.4.3 コントラスト比4.5:1(大きな文字は3:1)、大きな文字は18ptまたは太字14pt、コントラスト比の式
• 08W3C: Understanding SC 1.4.3 Contrast (Minimum)背景画像が文字と十分なコントラストを持たない場合を失敗例に挙げている、G18は文字とその背後の背景とのコントラスト

よくある質問

あわせて使いたいツール