CSSグラデーションジェネレーター
背景用の美しいグラデーションCSSを作成
CSS Code
基本設定
90°
色と位置
Color 10%
Color 2100%
実際の使用例
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
ボタンやカードの背景に
単色の背景よりも、少しだけグラデーションをかけることで、モダンで奥行きのあるデザインになります。
オーバーレイとして
写真の上に半透明の黒グラデーションを重ねることで、文字を読みやすくするテクニック（オーバーレイ）にも使えます（色の透明度調整が必要）。