CSS グラジエント ジェネレーター
リニアまたはラジアルを選択して角度とカラーストップを設定するとリアルタイムプレビューとCSS出力が即時生成されます。
複数のカラーストップと位置を編集してCSSのlinear gradientまたは円形radial gradientを作り、background宣言をコピーします。
CSSグラデーションを作る方法
- LinearまたはRadialを選択します。
- ストップを追加・削除し、色と0〜100%位置を調整します。
- Linearでは角度も設定し、生成されたbackground宣言をコピーします。
出力ルール
ストップは出力前に位置の数値で並べ替えられます。
Linearはlinear-gradient、Radialはcircleのradial-gradientのみで、conic、repeating、ellipse、詳細位置設定には対応しません。
プライバシーと制限
編集とプレビューはブラウザ内で完結します。生成できるのは通常のlinear gradientとcircle radial gradientです。
CSS Gradient FAQ
2色より多く追加できますか？
はい。Add Stopで追加できます。
ストップは自動で並びますか？
はい。位置のパーセントでソートされます。
Radialで角度は使いますか？
いいえ。Radialでは角度UIを非表示にします。
Conic gradientはありますか？
いいえ。Linearと円形Radialのみです。
Repeating gradientは作れますか？
いいえ。非repeatingのみです。