Gradient Generator
Gradient Generator — ブラウザで動作します。入力は保存されません。
グラデーション生成
値を入力してから「計算する」を押してください。
プレビュー
linear-gradient の CSS をリアルタイムで生成します。色は2つ以上必要です。
使い方
- 種類（線形または放射状）、方向、少なくとも2つの色を選びます。
- 色を追加 / 色を削除でストップ数を変えます。色は2つ以上必要です。
- ライブプレビューを確認し、コピーで
backgroundCSSをコピーします。 - リセットで既定の2色線形グラデーションに戻します。
ポイント
CSSグラデーションは単色の background-color ではなく、背景画像です。線形は角度や to right などのキーワードに沿い、放射状は中心から広がります。ストップを増やすとその経路に色が足されます。生成器はスタイルシートに貼れる1つの background 宣言を出します。ホバー・アニメ・ベンダープレフィックス用の別ルールは出しません。
同じパーセントに2色を置くハードストップは縞に見えます。柔らかい混色はパーセントをずらします。ピッカーのHEXもRGBも使えます。生成はブラウザ内だけです。透明度が必要なら、コピー後のCSSを rgba/hsla に直してください。ピッカーは通常不透明HEXです。
例
#4f46e5 から #06b6d4 へ右下方向の線形は、よくあるヒーロー背景です。50%に中間ストップを足すと3色の混色になります。background: の後ろの値をそのまま使えます。写真のオーバーレイの上では135deg付近が合いやすいです。ボタンなら180deg（上が少し明るい）が定番です。同じ入力をやり直すときは、先にリセットして古い出力が混ざらないようにします。共用PCでは終わったら欄を空にしてください。タブを閉じれば貼った内容は消え、サーバーへ削除依頼を送る必要はありません。ボタン名は画面上部のツールと同じです。結果が空なら必須欄と隠れたエラーを確認してください。
関連: ボックスシャドウ生成 · カラーピッカー
よくある質問
繰り返しや円錐グラデーションは作れますか？
この版は線形と放射状のCSSを出します。repeating と conic の構文はありません。
色は何個まで足せますか？
色を追加でストップを足します。最低2色が必要です。
コピーにプロパティ名は含まれますか？
完全な <code>background: ...;</code> 宣言をコピーします。関数だけ必要なら貼ったあとプロパティ名を消してください。
ベンダープレフィックスは付きますか？
付きません。現行ブラウザは標準の <code>linear-gradient</code> / <code>radial-gradient</code> を理解します。
CSSはサーバーに保存されますか？
いいえ。ブラウザ内だけで生成します。
透明な色は使えますか？
ピッカーのHEXは通常不透明です。アルファが必要ならコピー後にスタイルシートへ rgba/hsla を貼ってください。
最終確認日: 2026-09-04