コンテンツへスキップ
CSS Gradient Generator
色と位置を指定してlinear-gradient・radial-gradientのCSSを生成（ジェネレーター）します。
使い方
- 「種類」で線形（Linear）または円形（Radial）を選びます。
- 各色の入力欄に色（HEXなど）と位置（0〜100%）を入力します。「色を追加」で色を増やせます。
- 「CSSを生成する」ボタンをクリックすると、プレビューと生成されたCSSが表示されます。
入力例・出力例
入力
linear / 90deg / #FF5733(0%), #3357FF(100%)
出力
linear-gradient(90deg, #FF5733 0%, #3357FF 100%)
よくある質問
何色まで指定できますか？
上限はありません。「色を追加」で必要な数だけ色を追加できます（最低2色必要です）。
円形（Radial）を選ぶと角度の指定は使われますか？
いいえ。角度はLinear（線形）の場合のみ使用され、Radial（円形）では無視されます。
colorの欄には色名やrgb()も入力できますか？
はい。HEX形式は入力時に妥当性を検証しますが、red・rgb(255,0,0)などのCSSカラー表記もそのまま出力に利用できます。