CSSグラデーション生成器
ビジュアルエディタで美しいCSSグラデーションを作成します。線形、放射状、円錐形グラデーションに対応。
100% Client-Side
90deg
0deg360deg
0%
100%
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
概要 CSSグラデーション生成器?
CSSグラデーションコードをビジュアルで作成するツールです。線形・放射状グラデーションの色と方向を調整し、すぐに使えるCSSコードを生成します。
使い方
- グラデーションタイプ（線形/放射状）を選択してください
- カラーストップを追加して位置を調整してください
- 方向や角度を設定してください
- 生成されたCSSコードをコピーしてください
計算式
linear-gradient(direction, color1, color2, ...)
よくある質問
- 線形と放射状グラデーションの違いは？
- 線形（linear）は直線方向に、放射状（radial）は中心から外側に広がるグラデーションです。
- 3色以上も使えますか？
- はい、カラーストップを好きなだけ追加できます。各色の位置をパーセントで指定できます。
- グラデーションはすべてのブラウザで動作しますか？
- 最新ブラウザではすべて対応しています。IE 9以下ではフォールバック背景色を指定することを推奨します。