色と向きをプレビューで見ながらグラデーションを作り、仕上がった background 宣言をコピーして使うためのツールです。開いた直後は「夕焼け」のプリセットが入っていて、CSSは background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%); になっています。
使い方
- プリセット：夕焼け、海、キャンディ、モノクロ、オーロラの5種類があります。どれかを押して、作り始めの土台にします。
- 種類：「線形」「放射状」「円錐形」から選びます。選んだ種類に応じて、下に出るオプションが変わります。
- カラーストップ：色と位置を決めます。操作の詳細は次の節で説明します。
- OKLCHで補間する（in oklch）：オンにすると、色と色のあいだをOKLCH色空間でつなぎます。
- CSS：現在の設定から作った宣言が出ます。「CSSをコピー」で取り出せます。
| 種類 | CSS関数 | 選べるオプション |
|---|---|---|
| 線形 | linear-gradient |
角度。90deg なら左から右、180deg なら上から下です |
| 放射状 | radial-gradient |
形状（「円」「楕円」）と中心位置 |
| 円錐形 | conic-gradient |
角度（色が回り始める向き）と中心位置 |
角度は、数値の欄に直接入れるか、スライダーで0〜360の範囲から選びます。数値の欄なら360を超える値や負の数も入れられ、入れた値がそのままCSSに出ます。中心位置は、中央、4つの辺、4つの角の計9か所から選びます。
ストップの操作
カラーストップ（color stop）とは、「この位置ではこの色」と決めておく点のことです。グラデーションは、ストップとストップのあいだをつないで作られます。置けるのは2個から8個までです。
- グラデーションバーの何もないところを押すと、そこにストップが1つ増えます。色はその場所にもともと見えていた色になるので、足した直後は見た目が変わりません。そこからドラッグで動かすか、色を変えてください。
- 「ストップを追加」ボタンは、最後のストップと100%のちょうど中間に、白（#ffffff）のストップを入れます。最後のストップがすでに100%にあるときは、重ならないように、ストップの間隔がいちばん広い区間の中間に入れます。0%と100%に1つずつあるなら、50%に入ります。
- 位置を変えるには、ハンドルをドラッグするか、一覧の位置の欄に数字を入れます。キーボードの場合は、ハンドルを選んだ状態で矢印キーを押すと1%ずつ、Shiftを押しながらだと10%ずつ動き、Deleteで削除できます。
- 一覧の上へ・下へのボタンを押すと、隣のストップと位置が入れ替わります。色の並びを逆にしたいときに便利です。
- 削除ができるのは、ストップが3個以上あるときだけです。
一覧は常に位置の順に並び、CSSにも位置の順で書き出されます。位置は小数第1位までです。
入力できる色の形式: ストップの色として読めるのは、HEX（3・4・6・8桁）、色名、rgb()、hsl()、oklch()、transparentです。hwb()、lab()、lch()、color()関数と、var()で書いた変数には対応していません。読めない色があると「このツールが読み取れるCSSカラーではありません。」と表示され、そのストップはプレビューからもCSSからも外れます。読めた色は、入力したときの表記のままCSSに入ります。
OKLCHで補間すると中間の色が変わります
色をすべてHEX、色名、rgb()、hsl()で書いたCSSのグラデーションは、特に指定しなければsRGB色空間の上で、2色の赤・緑・青の値をそれぞれ直線的に混ぜていきます。ところが、人が感じる明るさはこの数字に比例しません。そのため、色相環で遠く離れた2色を混ぜると、真ん中が暗くくすんでしまいます。OKLCHは明るさ（L）、彩度（C）、色相角（H）を別々に持ち、3つの値をそれぞれつないでいくので、真ん中で明るさや彩度が落ち込みません。
2つのストップを0%と100%に置いて、バーの50%の位置の色を計算した結果が次の表です。
| 2色 | sRGBで混ぜた真ん中 | OKLCHで混ぜた真ん中 |
|---|---|---|
赤 #ff0000 → 緑 #00ff00 |
#808000（暗いオリーブ色） |
#f99500（明るいオレンジ） |
青 #0000ff → 黄 #ffff00 |
#808080（グレー） |
#00cfbd（青緑） |
夕焼けプリセット #ff7e5f → #feb47b |
#ff996d |
#ff9a68 |
差が大きくなるのは色相が離れているときで、夕焼けプリセットのように近い色どうしではほとんど変わりません。もう1つ知っておきたいのは、OKLCHで混ぜると、元の2色のどちらにもなかった色相が真ん中に現れることです。赤と緑のあいだにオレンジや黄色が挟まるのがその例です。2色をまっすぐ混ぜたいのであれば、このオプションはオフにするほうが向いています。
コピーされるCSSが2行になる理由
in oklch のように補間の方法を指定する書き方は、CSSに加わったのが比較的遅く、解釈できないブラウザもあります。そこで、OKLCH補間をオンにしたときは宣言を2行で出しています。赤から緑へ向かう線形グラデーションの場合はこうなります。
background: linear-gradient(90deg, #ff0000 0%, #ff3300 12.5%, #ff5600 25%, #ff7600 37.5%, #f99500 50%, #e3b200 62.5%, #c2ce00 75%, #8fe800 87.5%, #00ff00 100%);
background: linear-gradient(90deg in oklch, #ff0000 0%, #00ff00 100%);- 1行目は代替案です。隣り合うストップのあいだを8等分し、OKLCHで計算した中間色7個を、通常のHEXのストップとして挟んであります。ストップは、元が2個なら9個、3個なら17個に増えます。
- 2行目は、
in oklchの書き方そのままです。
同じプロパティを2回宣言すると、後に書いたほうが効きます。したがって、in oklch を解釈できるブラウザは2行目を使い、解釈できないブラウザは2行目を読み飛ばして1行目を使います。
OKLCH補間がオンのあいだ、画面のプレビューとグラデーションバーは、どのブラウザで開いても1行目の方式で描かれます。代替案の行は、中間色をsRGBの範囲に合わせてHEXで書いた近似値です。そのため、ブラウザが2行目をじかに描いた結果とは、色がわずかに違うことがあります。色の正確さが大事な仕事では、貼り付けたあとに対象のブラウザで確かめてください。
このツールでは作れないもの
repeating-linear-gradientなどの繰り返しグラデーション。コピーしたCSSの関数名の前にrepeating-を付け、ストップの範囲を自分で書き直す必要があります。- 放射状のサイズ（
closest-sideなど）と、at 30% 70%のように座標で指定する中心位置 - 複数のグラデーションをカンマで重ねた背景
- パーセントではなく
px単位で指定するストップの位置 in hsl、in oklabといった別の補間方法