CSSグラデーション生成ツール
無料のオンラインCSSグラデーション生成ツール。linear・radial・conicグラデーションをリアルタイムプレビューで作成し、CSSコードをワンクリックでコピー。
プリセット
グラデーションタイプ
角度: 135°
カラーストップ
0%
100%
CSSコード
background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);使い方
グラデーションタイプを選択
Linear（線形）・Radial（放射）・Conic（円錐）から選びます。LinearとConicは角度スライダーで方向を調整できます。
カラーストップをカスタマイズ
カラーピッカーで色を選ぶか、HEXコードを直接入力します。スライダーで各ストップの位置（0〜100%）を調整してください。
CSSをコピー
「コピー」ボタンをクリックしてCSSのbackgroundプロパティをコピーし、スタイルシートに直接貼り付けて使用できます。
よくある質問
- CSSグラデーションは、2色以上の間を滑らかに変化させる効果をCSSだけで実現するものです。画像ファイルは不要で、background や background-image プロパティに linear-gradient()・radial-gradient()・conic-gradient() を指定します。
- Linear（線形）は直線方向に色が変化します。Radial（放射）は中心点から外側に広がります。Conic（円錐）は中心点を軸に色が回転するカラーホイール状のグラデーションです。
- 「+ 追加」ボタンをクリックすると、既存ストップ間の最も広い間隔の中点に新しいストップが挿入されます。色と位置は後から自由に変更できます。
- はい。生成されるCSSはすべてのモダンブラウザで動作する標準的な記法です（例: background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);）。