グラデーション生成ツール
CSS の線形・放射状グラデーションを視覚的に作成し、CSS コードをコピー。
100% プライベート——すべてブラウザ内で動作
広告
使い方
- 1
線形か放射状を選びます。線形の場合は 0°～360° の角度も設定できます。
- 2
各ストップの色を選び、スライダーで位置（0～100%）を調整します。
- 3
ストップは最大8つまで追加でき、不要なものは削除できます。
- 4
生成された CSS をコピーしてスタイルシートに貼り付けます。
使用例
青→紫（デフォルト）
入力
線形 · 135° · #3B82F6 0% → #8B5CF6 100%出力
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);3色の放射状グラデーション
入力
放射状 · #F59E0B → #EF4444 → #8B5CF6出力
background: radial-gradient(circle, #F59E0B 0%, #EF4444 50%, #8B5CF6 100%);よくある質問
線形と放射状の違いは？
線形グラデーションは設定した角度に沿って直線的に色が変化し、放射状グラデーションは中心から外側に円状に広がります。
生成した CSS はどのブラウザで使えますか？
すべてのモダンブラウザが標準の linear-gradient() と radial-gradient() に対応しています。ベンダープレフィックスは不要です。
カラーストップはいくつまで使えますか？
最大8つです。各ストップは個別の色と 0%～100% の位置スライダーを持ちます。