グラデーション作成
線形・円形・円錐グラデーションを作り CSS や画像で出力
- ファイルは端末の外に出ません
- ブラウザ内で処理
- 無料・登録不要・透かしなし
カラーストップ
バーをクリックしてストップを追加。ハンドルはドラッグで移動、矢印キーで微調整、Delete で削除。
- 1%
- 2%
- 3%
コード
1 行目は “in oklab/oklch” 非対応ブラウザ向けに、ストップを事前計算したフォールバックです。
グラデーション作成の使い方
線形・円形・扇形のグラデーションを、ストップ数の制限なく作れます。補間は sRGB・OKLab・OKLCH から選べ、CSS・Tailwind・SVG のコードや最大 8192 px の画像で出力できます。
- 1
「種類」（線形・円形・扇形）を選び、「角度」「形状」や中心位置を設定します。円形と扇形はプレビュー上をドラッグして中心を動かせます。
- 2
「カラーストップ」を編集します。バーをクリックすると追加、ハンドルをドラッグすると移動でき、一覧で色と位置を変更できます。
- 3
「色の補間空間」（sRGB・OKLab・OKLCH）を選びます。「プリセット」や「ランダム」から始めることもできます。
- 4
CSS・Tailwind・SVG のタブからコードをコピーします。
- 5
画像が必要なら「幅」「高さ」を設定するかサイズを選び、PNG・JPG・WebP を選んでダウンロードします。
よくある質問
sRGB・OKLab・OKLCH の補間の違いは？
sRGB は従来の CSS の混色で、補色同士だと中間が灰色っぽくなることがあります。OKLab は知覚的に均一で中間がにごりません。OKLCH は色相環に沿って移るので鮮やかさを保てます。
OKLab や OKLCH のグラデーションは古いブラウザでも表示されますか？
CSS 出力の 1 行目は、“in oklab/oklch” に対応していないブラウザ向けに、計算済みのストップを並べたフォールバックです。SVG コードやダウンロード画像も計算済みのストップを使うので、どこでも同じ見た目になります。
扇形のときに SVG タブが使えないのはなぜですか？
SVG には扇形（conic）グラデーションがないためです。PNG・JPG・WebP 画像をダウンロードしてください。
透明なストップは使えますか？
使えます。rgba() や #rrggbbaa など透明度付きの色を指定できます。JPG は透明を扱えないので、透明を残すなら PNG か WebP でダウンロードしてください。
画像はサーバーで作られますか？
いいえ。ブラウザのキャンバスに描画してそのまま保存します。サイズは各辺 1〜8192 px です。
キーボードでストップを微調整するには？
ストップのハンドルにフォーカスし、矢印キーで 1%（Shift で 10%）ずつ移動、Home と End で両端へ移動、Delete で削除できます。ストップは常に 2 つ以上残ります。