CSSグラデーション生成
CSSグラデーション生成ツールは、線形・放射状・扇形のグラデーションを作り、CSSを渡します。補間はsRGBではなくOKLabで行われます。これが、青から黄色へのグラデーションが途中で灰色になるのを防ぐ仕組みです。結果は2回書き出されます。1つはモダンな`in oklab`によるグラデーション、もう1つは同じ曲線を12個の通常のカラーストップにサンプリングしたもので、古いブラウザでも同じ見た目になります。
種類
指定した角度の直線に沿って色が変わります。最もよく使う種類です。
色の分岐点（2）
- 0%
- 100%
CSS
background: linear-gradient(135deg, #00696f 0.0%, #2d726e 9.1%, #467b6c 18.2%, #5b846a 27.3%, #6f8c67 36.4%, #839563 45.5%, #969d5e 54.5%, #a9a557 63.6%, #bcad4f 72.7%, #cfb544 81.8%, #e2bd35 90.9%, #f5c518 100.0%);
background: linear-gradient(135deg in oklab, #00696f 0%, #f5c518 100%);この順序で2つの宣言を出力します。in oklab に対応するブラウザーは2番目を使い、それ以外は色の分岐点で同じ曲線を表した1番目を使います。
色空間による違い
同じ分岐点を2通りで補間します。色相環で反対側の色ほど差が大きくなります。青と黄色で試してください。
sRGB — 標準
OKLab — in oklab
12段階の代替版
CSSグラデーション生成はどう動きますか？
グラデーションとは、2つの色の間にあるすべての色を生み出すルールであり、問題はその生み出しをどの色空間で行うかに尽きます。デフォルトはsRGBですが、sRGB補間には有名な失敗があります。色相環の反対側にいる彩度の高い2色の中点は、その間の色にはならず、彩度を落とした泥のような色になるのです。青から黄色は灰色へ、赤から緑は茶色へ。これはブラウザのバグではありません。ガンマエンコードされた3つのチャンネルを平均すれば、こうなるということです。
OKLabがこれを解決する理由
OKLabは知覚的な色空間です。3つの軸はおおよそ明度、緑から赤、青から黄色に対応し、空間内の距離は、目が報告する距離と一致します。この空間で2色を平均すると、人がその中間と呼ぶ色が得られます。そのために作られた空間だからです。CSS Color 4ではin oklabと書くだけで直接指定でき、現行のすべてのブラウザが対応しています。
フォールバックの役割
in oklabがブラウザに搭載されたのは2023年です。それより古い環境に、見た目の違うグラデーションを残したままにする代わりに、このツールはOKLabの曲線を12点でサンプリングし、通常のカラーストップとして書き出します。古いブラウザはsRGBで補間しますが、それは端点がすでに正しい曲線上にある短い区間だけです。それほど短い区間では、2つの色空間の違いは見た目に現れません。2つの宣言はこの順序で両方出力されるため、2つ目を理解するブラウザはそちらを使い、そうでないブラウザは1つ目を使います。
グラデーションのもう1つの失敗
バンディングです。広い範囲にわたるグラデーションは、限られた8ビット値の数を順に辿ります。大きく平坦な面では、その段差が縞として見えます。これをCSS側から直す方法はありません。ディスプレイの値が本当に足りていないからです。解決するのは、上から少量のノイズを重ねることです。数百バイトのタイル状PNGを不透明度3%で重ねるか、SVGのfeTurbulenceレイヤーを使います。ヒーローのグラデーションに縞が見えたら、それが正体であり、カラーストップをいくら追加しても効果はありません。
グラデーションを使うこと自体について
テキストの背後にあるグラデーションは、コントラストの問題です。比は要素の中の位置によって変わるため、合格する角と不合格の角が、両方とも現実に存在します。テキストをその上に置かざるを得ない場合は、中央ではなく両端を確認するか、グラデーションの上に無地のパネルを置き、そこへテキストを載せてください。
カラーストップと方向
linear, 135° #00696f 0% #f5c518 100%
2種類のCSS
background: linear-gradient(135deg, #00696f 0.0%, #2a7767 9.1%, #4b855c 18.2%, …); background: linear-gradient(135deg in oklab, #00696f 0%, #f5c518 100%);
CSSグラデーション生成が対応するオプションとエッジケースは？
| パラメータ | 型 | デフォルト | 動作とエッジケース |
|---|---|---|---|
| 線形 | 角度 | 135deg | 0degは上向き、90degは右向きです。角度は色が進む方向で、線が傾く方向ではありません。 |
| 放射 | 中心の円 | — | 色が中心から外側に広がります。`circle`は正方形でないボックス内でも円形を維持します。デフォルトの`ellipse`は要素に合わせて伸縮します。 |
| 円錐 | 開始角度 | 135deg | 色が中心を一周します。すべてのCSS円グラフやダイヤル、そしてカラーピッカーの色相リングの基礎です。 |
| in oklab | キーワード | on | 知覚的に補間します。2023年以降対応——Chrome 111, Safari 16.2, Firefox 113。オフにすると、同じ停止点を持つプレーンなグラデーションの動作を確認できます。 |
| フォールバック | 12ステップ | 自動 | OKLab曲線がプレーンな停止点にサンプリングされ、2つの宣言の最初として出力されるため、古いブラウザでも一致します。 |
| ステップ位置 | 0–100% | 等間隔 | グラデーション線上で色が配置される位置です。同じ位置に2つの停止点があると、ブレンドではなく硬いエッジが作られます。 |
| ステップの色 | 任意の表記 | — | Hex, rgb(), hsl(), oklch()またはCSSの色名です。アルファ値は保持され、`transparent`へのグラデーションは、キーワードではなくアルファ値0で色を指定する必要があります。 |
| ステップ数 | 2以上 | 2 | 新しい停止点は最も広い間隔に配置され、その場所にある既存の曲線の色を取得するため、1つ追加してもグラデーションは変わりません。 |
よくある質問
CSSグラデーションはどうやって作りますか？
`background: linear-gradient(135deg, #00696f, #f5c518)`を指定します。角度の後に2色以上を並べます。0degは下から上へ、90degは左から右へ走ります。色の後にパーセントを付けると、その線上の位置に固定されます。点から放射状に広がる色には`radial-gradient`を、点の周りを巡る色には`conic-gradient`を使います。このページは、設定したカラーストップから、補間の修正とフォールバック付きで、この3種類すべてを書き出します。
グラデーションの中ほどが灰色になるのはなぜですか？
ブラウザがガンマエンコードされたsRGBチャンネルを平均しているからです。色相環の反対側にいる彩度の高い2色の平均は、彩度の落ちた色になります。青から黄色が典型例です。角度の後に`in oklab`を追加すれば解決します。補間が知覚的な色空間で行われ、中点が人が中間と呼ぶ色になるからです。古いブラウザ向けには、このツールが併せて出力する12ストップのフォールバックを使ってください。
`in oklab`を本番環境で使っても安全ですか？
フォールバック付きなら安全です。Chrome 111、Safari 16.2、Firefox 113で搭載されており、2026年のトラフィックの圧倒的多数をカバーします。それより古い環境では、宣言全体が不正なものとして無視されます。だからこそ、通常のストップ版を先に書き出すのです。CSSは理解できる最後の宣言を採用するため、古いブラウザはフォールバックを、新しいブラウザはOKLab版を使います。どちらも壊れた背景を見ることはありません。
グラデーションに縞模様が見えるのはなぜですか？
それはバンディングであり、CSSではなくディスプレイの限界です。広い範囲では、グラデーションは限られた8ビット値の集合を順に辿らされ、その段差が縞として見えます。控えめな暗いグラデーションで最悪になります。知覚的に値が最も離れている場所だからです。カラーストップを増やしても効果はありません。値そのものが存在しないからです。効くのは、上から薄いノイズテクスチャを重ねることです。不透明度約3%のタイル状PNGか、SVGのfeTurbulenceレイヤーを使います。
グラデーションの上にテキストを置けますか？
置けますが、コントラスト比は位置ごとに違うため、「合格している」はその要素についての1つの事実にはなりません。テキストが実際に跨ぐ最も明るい点と最も暗い点を確認し、悪い方を実際の比として扱ってください。範囲が広い場合の実務的な答えは、グラデーションに直接載せるのではなく、無地または半透明のパネルの上にテキストを置くことです。
グラデーションを透明へフェードさせるには？
`transparent`キーワードを使ってはいけません。いくつかのエンジンではtransparentが透明な黒として解決されるため、赤をそこへ向けてフェードさせると、暗い濁ったピンクを通過します。代わりに、同じ色でアルファ0のものを使ってください。`#ff0000`から`#ff000000`へ、あるいは`rgb(255 0 0 / 0)`です。そうすれば色相は最後まで保たれます。OKLabでの補間はこの影響を減らしますが、原因そのものは取り除きません。