背景グラデーションを作るたびにlinear-gradient(...)構文を覚えて手で書く代わりに、色と方向を見ながら作って完成したCSSをそのままコピーしましょう。
グラデーションの種類と文法
- 線形（linear-gradient）: 角度1つで方向を決めます。
90degは左から右、180degは上から下です。 - 放射状（radial-gradient）: 中心から外側へ広がります。形状（円・楕円）と中心位置を選べます。
- 円錐形（conic-gradient）: 中心を軸に時計回りに色が変わります。開始角度と中心位置を選べます。
3種類とも色のストップ（color stop）のリストを使います。各ストップは色と位置（0〜100%）で構成され、このツールでは2個から8個まで追加・削除・並べ替えができます。グラデーションバー上のハンドルをドラッグして位置を動かしたり、バーを押して好きな位置にストップを追加したりすることもできます。
OKLCHで補間すると中間色がくすまない理由
CSSグラデーションは通常、sRGB色空間で2色の赤・緑・青の値を直線的に混ぜます。問題は、人が感じる明るさがこの数値と比例しないことです。そのため色相環で離れた（反対に近い）色同士を混ぜると、中間で明るさが落ち込み、くすんだり灰色に近い色になります。
- 赤（#ff0000）から緑（#00ff00）へ: sRGBの中間はくすんだオリーブ色（#808000）ですが、OKLCHの中間は明るいオレンジに近くなります。
- 青（#0000ff）から黄色（#ffff00）へ: sRGBの中間はほぼ灰色（#808080）ですが、OKLCHの中間は鮮やかな青緑に近くなります。
OKLCHは明るさ（L）・彩度（C）・色相角（H）をそれぞれ別の軸で扱う色空間なので、明るさを一定に保ったまま色相だけを動かしやすくなります。その結果、中間色がより鮮やかに保たれます。このツールの「OKLCHで補間する」をオンにすると、実際にこの計算を適用したグラデーションをプレビューとCSSの両方で確認できます。
ブラウザ対応と代替案
in oklchのような色補間方式を指定する構文は比較的最近CSS仕様に加わったため、古いブラウザは認識できないことがあります。このツールはOKLCH補間をオンにすると、CSSをコピーする際に2行を出力します。
- どのブラウザでも同じ見た目になるよう、OKLCHで計算した色を細かいsRGBのストップに展開した代替案の行
- 実際の
in oklch構文を使った行
同じプロパティ（background）を2回宣言すると、CSSは後に出てきた方を最終的に適用するため、in oklchを理解するブラウザは2行目を使い、理解しないブラウザは自動的に1行目を使います。実際の対応状況は変わり続けるため、重要なプロジェクトでは対象ブラウザの一覧で直接確認することをおすすめします。