CSS グラデーション生成ツール
美しいCSSグラデーションを視覚的に作成。線形、放射状、円錐形のグラデーションタイプと複数のカラーストップに対応。
グラデーションタイプ
角度135deg
カラーストップ
%
%
CSSコード
オンラインでCSSグラデーションを作成する方法
- 1.グラデーションタイプを選択：線形、放射状、または円錐形。
- 2.スライダーで角度を調整（線形/円錐形グラデーション向け）。
- 3.カラーストップを追加、削除、変更。色の値と位置パーセンテージを設定。
- 4.プリセットで素早く開始するか、ゼロからグラデーションを作成。CSSをコピーをクリックしてプロジェクトで使用。
よくある質問
線形、放射状、円錐形グラデーションの違いは？
線形グラデーションは指定された角度の直線に沿って色が遷移します。放射状グラデーションは中心点から円形または楕円形に外向きに放射します。円錐形グラデーションはカラーホイールのように中心点の周りで色が回転します。
カラーストップはいくつ追加できますか？
必要なだけカラーストップを追加できます。各ストップには色と位置パーセンテージ（0-100%）があります。グラデーションを作成するには最低2つのカラーストップが必要です。
これらのグラデーションはすべてのブラウザで使用できますか？
はい。標準構文（linear-gradient、radial-gradient、conic-gradient）のCSSグラデーションはすべての最新ブラウザでサポートされています。円錐形グラデーションは非常に古いブラウザでは動作しない場合があります。
ウェブサイトにグラデーションを追加するには？
生成されたCSSコードをコピーして要素のスタイルに追加します。CSSのbackgroundプロパティとして使用できます。例：.my-element { background: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%); }