🌈CSSグラデーション生成ツール

使い方

1. 1

   グラデーションタイプを選択

   Linear（線形）・Radial（放射）・Conic（円錐）から選びます。LinearとConicは角度スライダーで方向を調整できます。

2. 2

   カラーストップをカスタマイズ

   カラーピッカーで色を選ぶか、HEXコードを直接入力します。スライダーで各ストップの位置（0〜100%）を調整してください。

3. 3

   CSSをコピー

   「コピー」ボタンをクリックしてCSSのbackgroundプロパティをコピーし、スタイルシートに直接貼り付けて使用できます。

よくある質問

CSSグラデーションとは何ですか？

CSSグラデーションは、2色以上の間を滑らかに変化させる効果をCSSだけで実現するものです。画像ファイルは不要で、background や background-image プロパティに linear-gradient()・radial-gradient()・conic-gradient() を指定します。

Linear・Radial・Conicの違いは何ですか？

Linear（線形）は直線方向に色が変化します。Radial（放射）は中心点から外側に広がります。Conic（円錐）は中心点を軸に色が回転するカラーホイール状のグラデーションです。

カラーストップをもっと追加できますか？

「+ 追加」ボタンをクリックすると、既存ストップ間の最も広い間隔の中点に新しいストップが挿入されます。色と位置は後から自由に変更できます。

生成したCSSはそのまま使えますか？

はい。生成されるCSSはすべてのモダンブラウザで動作する標準的な記法です（例: background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);）。