CSSグラデーションジェネレーターとは
CSSグラデーションジェネレーターは、構文を覚えずにCSSグラデーション背景を作成できるビジュアルツールです。グラデーションの種類を選び、色とストップ位置を選択し、角度を調整します。ライブプレビューがリアルタイムでグラデーションを表示します。
クイックアンサー
線形・放射・扇形のCSSグラデーションをライブプレビュー付きで視覚的に作成。最大3つのカラーストップを追加し、角度を調整して繰り返しモードを切り替え。完成したCSS backgroundプロパティを直接コピー。
Last updated: 2026-06-11
制限事項
- このツールは簡略化のため3つのカラーストップをサポート。
- 放射グラデーションは円形のみで生成。
- ベンダープレフィックス付きCSS（-webkit-、-moz-）は生成されない。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- グラデーションの種類を選択：線形（直線）、放射（中心から円形）、扇形（カラーホイール回転）。
- 角度を設定してグラデーションの方向を制御。線形の場合、0degは下から上へ。
- 2色または3色を選び、位置のパーセンテージを設定。0%が開始点、100%が終了点。
- パターン出力のために繰り返しモードをオンに。CSS backgroundプロパティをスタイルシートにコピー。
主な用途
- 135度の青から紫への対角線グラデーションでモダンなヒーローセクション背景をデザイン。
- 中心点の周りを回転する円グラフやカラーホイール用の扇形グラデーションを作成。
- repeating-linear-gradientでタイトなカラーストップ位置のストライプパターン背景を構築。