CSS グラデーションジェネレーター
最大8つのカラーストップを混ぜて線形・放射・扇形グラデーションを作成。ドラッグ、調整、本番用コードをコピー。
グラデーションジェネレーターの使い方
- グラデーションタイプを選択：線形、放射、扇形。
- グラデーションバーをクリックしてカラーストップを追加。バーに沿ってドラッグして位置を変更。
- ストップを選択して色、不透明度、正確な位置を変更（最大8つ）。
- 角度（線形/扇形）、形状（放射）、中心点を調整して理想の見た目に。
- CSS の background 宣言をコピーするか、Tailwind タブでユーティリティクラスを取得。
このグラデーションジェネレーターについて
CSS グラデーションはブラウザが生成する画像です：linear-gradient は直線に沿って描画し、radial-gradient は中心点から放射状に広がり、conic-gradient はカラーホイールのように中心の周りを掃引します。それぞれがオプションの位置を持つ2つ以上のカラーストップを受け取ります。手で書くのは、特に多数のストップや rgba 透明度がある場合、遅くて間違いやすい作業です。
このジェネレーターは、カラーストップをバーに沿ってドラッグしたり、角度を回したり、中心点を動かしたりするたびに、グラデーションをライブでレンダリングします。10種類の厳選プリセット（夕日、海、キャンディ、虹…）から始めて、自分だけのグラデーションに。出力はすべてのモダンブラウザで動作する1つの background 宣言。Tailwind タブは同じグラデーションを任意値構文で包み、ユーティリティファーストのワークフローに対応します。
グラデーションのよくある質問
カラーストップはいくつ追加できますか？
最大8つです。グラデーションバーの任意の場所をクリックすると、その位置に新しいストップが挿入されます。色は隣接するストップから自動補間されます。ドラッグで位置を変更し、選択して色と不透明度を編集し、「ストップを削除」ボタンで削除できます（最低2つは保持されます）。
線形・放射・扇形グラデーションの違いは？
線形グラデーションは指定角度の直線に沿って色を遷移させます。放射グラデーションは中心点から円または楕円で外側に広がります。扇形グラデーションは中心点の周りを（円グラフやカラーホイールのように）色を回転させ、from 開始角度をサポートします。
透明度のあるグラデーションはどう作りますか？
任意のカラーストップを選択し、不透明度スライダーを下げます。ジェネレーターはそのストップに rgba() カラーを出力するので、透明にフェードしたり、下にある背景画像や背景色の上にブレンドしたりできます。
色の方向を反転するには？
「反転」ボタンをクリック。すべてのストップ位置をミラーリング（0% が 100% に、など）して、角度を変えずにグラデーションを反転します。線形グラデーションでは角度スライダーを180°回す方法もあります。
background の代わりに background-image として使えますか？
はい。生成される値（linear-gradient(...)、radial-gradient(...)、conic-gradient(...)）は CSS の