CSSグラデーション作成

CSS Gradient Builder

停止点をドラッグして線形・円形・扇形のグラデーションを作り、sRGBまたはOKLCHのCSSを出力します。

線形・円形・扇形のグラデーションを組み立て、停止点のあいだで何が起きるかを決める`in oklch`の補間指定も含めてCSSを出します。同じ停止点を必ずsRGBでももう一度下に描きます。知覚的な色空間で補間する理由は目で見る話で、4センチのグラデーションのほうが段落よりも速く伝わるからです。

🔒 ブラウザの中だけで動きますgradientcssgenerator

同じ停止点を sRGB で補間したものです。この帯の真ん中が上の帯より色あせて見えるなら、それは補間空間が仕事をしている証拠です。sRGB の色立方体を突っ切る直線は、向かい合う色相のあいだで無彩色の軸の近くを通ります。

種類

繰り返し

角度 135°CSS の角度は 12 時の向きから始まって時計回りに回ります。数学の約束事とは違うので、90° は上ではなく右を指します。

補間空間

色相環に沿って回るので、中間点も彩度を保ちます。既定であり、CSS にこの構文が入った理由でもあります。

色相の経路色相環をどちら回りに進むかを決めます。 longer にすると停止点 2 つのグラデーションが虹になります。この問いが生まれるのは極座標の空間だけです。

停止点

0%
100%

プリセット

CSS

background-image: linear-gradient(135deg in oklch, #5b6cff 0%, #22d3ee 100%);

in oklch 節には 2023 年以降のブラウザーが必要です。それより古いエンジンは前の宣言に戻るのではなく宣言ごと捨ててしまうので、対応が要るなら手前の宣言に素の sRGB グラデーションを置いてください。

使い方

種類を選び、角度を決めます
線形はまっすぐ進み、円形は1点から広がり、扇形は1点のまわりを回ります。角度は線形と扇形に効きます。円形は角度の代わりに形と中心を取ります。
停止点を置きます
停止点ごとに色と0〜100%の位置があります。最低2つで、1つ足すと位置が均等に配り直され、そのあとで動かせます。プリセットは、停止点が3つ4つのときの振る舞いを手早く見るのに使えます。
補間する色空間を選びます。ここが本当の決定です
OKLCHは真ん中まで彩度を保つので、青から黄が途中で灰色になりません。OKLabは知覚的な最短経路を通り、2つの停止点の色相が近いときに正しい選択です。sRGBは従来どおりの振る舞いで、古いブラウザにも新しいブラウザと同じ結果を出させたいなら、意識して選ぶ価値があります。
極座標の空間では、環のどちら回りかを決めます
OKLCH、LCH、HSLは極座標なので、2つの色相のあいだには弧が2本あります。既定は`shorter`で、たいていはそれが望みどおりです。`longer`は停止点2つのグラデーションを虹に変えますが、それがまさに欲しい効果であることもあります。
値か宣言全体をコピーします
値は既存の`background-image`に入れるためのもので、宣言はそのまま貼り付けられます。

よくある質問

`in oklch`はどのブラウザでも動きますか。

動きません。2023年以降のエンジンが要りますし、それより古いエンジンはsRGBに落ちる代わりに宣言全体を捨てます。ここに部分対応はありません。手前の宣言に素のsRGBのグラデーションを置き、新しいエンジンにそれを上書きさせてください。CSSのカスケードによる標準的なフォールバックで、余分にかかるのは1行です。

sRGBの帯が真ん中で灰色になるのはなぜですか。

sRGBでの補間は色立方体の中をまっすぐ横切る線を引くからで、ほぼ向かい合った2つの色相を結ぶ線は無彩色の軸の近くを通ります。グラデーションに問題はありません。数字が言うとおりのことをしているだけで、その数字はもともと色の見えについてのものではありませんでした。

グラデーションに縞が見えます。ここで直せますか。

直接には直せません。縞は8ビットの出力が広い面積のゆるやかな傾斜を量子化したもので、補間する色空間をどう選んでも消えません。よくある対処は、薄いノイズを重ねる、目立たない繰り返しのテクスチャを敷く、グラデーションの進む距離を短くする、のいずれかです。このツールはCSSしか出さず、ディザリングは一切しません。

画像として書き出せますか。

書き出せません。出力はCSSの値で、それを描いたどんな画像よりも小さく、解像度に依存せず、アニメーションもできます。ラスター画像が要るなら、たとえばCSSのグラデーションが当てにならないメールのテンプレートのような場合は、プレビューのスクリーンショットを撮るか、canvasに描く背景パターン生成で作ってください。