CSSグラデーションジェネレーター
OKLCH・OKLab補間とsRGBフォールバックで線形・放射状・円錐のCSSグラデーションを作成。CSS・Tailwindクラス・SVGをコピー、PNG保存。
すべてブラウザ内で動作します - グラデーションがどこかにアップロードされることはありません。
カラーストップ
バーをクリックするとストップを追加、ストップをドラッグすると移動できます。ストップを選択中は矢印キーで移動、Deleteキーで削除できます。
プリセット
色の補間方法
同じストップを3通りの方法で補間しています。従来のsRGBでは離れた色の間がグレーっぽく濁ることがありますが、OKLabは明るさを均一に保ち、OKLCHは色の鮮やかさを保ちます。OKLabやOKLCHに対応していないブラウザには、見た目が同じsRGBのフォールバックが適用されます。
上に重ねる文字
- 白い文字
- 2.1:1
- 不十分
- 黒い文字
- 4.2:1
- AA（大きな文字のみ）
グラデーション上で最も低いコントラスト比です。WCAG AAでは本文テキストに4.5:1、大きな文字に3:1が必要です。
コード
background: linear-gradient(90deg, #0077a3 0%, #1178a2 1.56%, #1b79a1 3.13%, #2a7b9f 6.25%, #367d9c 9.38%, #3f7f9a 12.5%, #608591 25%, #959179 50%, #ad956b 62.5%, #c59959 75%, #dd9c41 87.5%, #e99d2f 93.75%, #ef9d22 96.88%, #f29e19 98.44%, #f59e0b 100%);
background: linear-gradient(in oklab 90deg, #0077a3 0%, #f59e0b 100%);見た目を確かめながらCSSグラデーションを作り、どこでも動くコードをコピーできます。線形・放射状・円錐から選び、カラーストップをドラッグして、色の補間方法を選びましょう。最新のブラウザはOKLabやOKLCHで補間でき、従来のsRGBグラデーションにありがちな中間のくすんだグレーを避けられます。コードには古いブラウザ向けに同等のsRGBフォールバックも含まれます。白や黒の文字を上に重ねても読みやすいかを確認でき、Tailwindクラス、SVG、任意サイズのPNGとして書き出せます。
よくある質問
sRGB、OKLab、OKLCHのグラデーションは何が違うのですか？
2つのストップの間の色をどう計算するかが違います。従来のCSSグラデーションはsRGBで補間するため、グレーに落ち込んだり（青から黄色はくすんだグレーを通ります）、中間が暗くなったりします。OKLabは同じ幅の変化が同じに見えるよう設計されているので、明るさが均一に保たれます。OKLCHは明度・彩度・色相を別々に補間するため、色相環に沿って回り、鮮やかさを保ちます - 赤から青は暗くくすんだ藤色ではなく紫を通ります。使うにはグラデーション内に「in oklab」または「in oklch」と書きます。
OKLCHグラデーションはすべてのブラウザで使えますか？
Chrome・Edge 111以降、Safari 16.2以降、Firefox 127以降が「in oklch」と「in oklab」に対応しています。それより古いブラウザのために、コードには「background」が2行あります。1行目は中間にストップを追加した通常のsRGBグラデーションで、見た目はほぼ同じです。2行目が最新の書き方です。ブラウザは理解できない行を無視するので、誰もがそのブラウザで描ける最良の表示を得られます。
Tailwind CSSではどう使いますか？
「Tailwindクラス」を選んでコピーします。bg-[linear-gradient(in_oklab_90deg,_#0077a3_0%,_#f59e0b_100%)] のような任意値（arbitrary value）で、Tailwindの仕様どおりスペースはアンダースコアで書かれています。classに貼り付けるだけで、設定は不要です。
円錐グラデーションをSVGでダウンロードできないのはなぜですか？
SVGには線形と放射状のグラデーションしかなく、CSSのように放射状グラデーションを繰り返すこともできません。その場合はPNGをダウンロードしてください。同じ計算で1ピクセルずつ描画するので、選んだどのサイズでもCSSと完全に一致します。
共有リンクは非公開ですか？
グラデーションはリンクの # より後ろの部分に保存されます。ここはブラウザがサーバーに送ることのない部分で、ページもすべてブラウザ内で描画されます。何もアップロードされず、グラデーションはこの端末にだけ保存されるので、次に開いたときもそのまま残っています。