CSSグラデーションジェネレーター

Q: OKLCH補間でbackgroundの行が2つあるのはなぜですか。

`in oklch` を理解しないブラウザは、その宣言を丸ごと破棄します。最初の行は、そうしたブラウザが使える通常のsRGBグラデーションで、対応するブラウザは2行目を適用します。

Q: 透明度は使えますか。

はい。ストップの色として、アルファ値付きのrgba()、hsl()、oklch()（たとえば `rgba(0, 0, 0, 0.5)`）を使います。

ドラッグできるカラーストップ、角度、繰り返しモード、OKLCH補間に対応した、線形・放射・円錐のCSSグラデーションを設計します。ライブプレビューで確認し、コードをコピーできます。

プリセット

グラデーション設定

種類

角度deg

補間に使う色空間

繰り返しグラデーション

カラーストップ

バーをクリックしてストップを追加し、ハンドルをドラッグして移動します。色は hex、rgb()、hsl()、oklch() で指定できます。

ストップ 1

位置

ストップ 2

位置

プレビュー

CSS コード

background: linear-gradient(90deg, #00c9ff 0%, #92fe9d 100%);

CSSグラデーションジェネレーターとは？

linear-gradient、radial-gradient、conic-gradient、それらの繰り返し版、そして最新の色補間（in oklab / in oklch）に対応した、本格的なCSSグラデーションエディターです。カラーストップはバー上でドラッグしたり、正確に入力したりでき、色はhex、rgb()、hsl()、oklch()で指定できます。

CSSグラデーションジェネレーターの使い方

プリセットを選ぶか、種類（線形、放射、扇形（conic））を選びます。
角度（線形）、開始角度（conic）、または形状・サイズ・中心位置（放射/conic）を設定します。
カラーストップを編集します。バーをクリックしてストップを追加し、ハンドルをドラッグして移動するか、各ストップの色と位置を入力します。
必要に応じて、繰り返しグラデーションにチェックを入れ、補間に使う色空間（OKLabまたはOKLCH）を選びます。
CSSコードをコピーします。

例

入力

Linear, angle 45°, stops #00c9ff at 0% and oklch(70% 0.2 150) at 80%, interpolation OKLCH

出力

background: linear-gradient(45deg, #00c9ff 0%, oklch(70% 0.2 150) 80%);
background: linear-gradient(in oklch 45deg, #00c9ff 0%, oklch(70% 0.2 150) 80%);

CSSグラデーションジェネレーターを使うべき場面

背景、ボタン、ヒーローセクション、グラデーションで作るストライプやカラーホイールに使います。やわらかな多点の「メッシュ」背景にはMesh Gradient Generatorを、画像の写真のような効果には、代わりにCSSフィルターを使ってください。

CSSグラデーションジェネレーターの仕組み

ストップは位置順に並べ替えられ、color position% の形で書かれます。線形グラデーションは度数の角度、放射グラデーションは shape [size] at x% y%、円錐グラデーションは from angle at x% y% を使います。バーをクリックすると、隣り合うストップから補間した色のストップが挿入されます。補間の色空間を選ぶと、ツールは2つの宣言を出力します。先にプレーンなsRGBのフォールバック、次に同じグラデーションを in oklch（または in oklab）付きで出力するため、古いブラウザでも動作するグラデーションが維持され、最新のブラウザでは、より滑らかな知覚的ブレンドが使われます。