CSSグラデーションジェネレーター
背景用の美しいグラデーションCSSを作成
CSS Code
基本設定
90°
色と位置
Color 10%
Color 2100%
CSSグラデーションジェネレーターの使い方
直感的な操作で、Webサイトの背景などに使えるグラデーションCSSを作成します。
1
タイプと角度の選択
グラデーションの種類（線形・円形）と、流れる方向（角度）を決めます。
2
色の調整
開始色と終了色を選びます。「色を追加」ボタンで中間色を増やすこともできます。
3
コードのコピー
プレビューで確認し、生成されたCSSコードをコピーして利用します。
実際の使用例
Instagram風
人気アプリのような鮮やかなグラデーション
INPUT
45deg, Yellow to Pink to Purple
OUTPUT
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
よくある質問
生成されるコードはどのブラウザに対応していますか？
現代の主要なモダンブラウザ（Chrome, Firefox, Safari, Edgeなど）で動作する標準的な構文を出力しています。非常に古いブラウザ（IEなど）は考慮していません。
画像のダウンロードはできますか？
現在はCSSコードの生成のみに対応しています。画像として保存したい場合は、スクリーンショット機能などをご利用ください。
役立つTips
ボタンやカードの背景に
単色の背景よりも、少しだけグラデーションをかけることで、モダンで奥行きのあるデザインになります。
オーバーレイとして
写真の上に半透明の黒グラデーションを重ねることで、文字を読みやすくするテクニック（オーバーレイ）にも使えます（色の透明度調整が必要）。