グラデーションジェネレーター
美しい CSS グラデーションをライブプレビューで作成。プリセットから選択またはカスタマイズ。CSS コードのコピーや PNG ダウンロードが可能。
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);すべての処理はブラウザ内で行われます。データがサーバーに送信されることはありません。
グラデーションの作り方
タイプを選択
線形、放射状、または円錐型のグラデーションタイプを選択します。
色を設定
カラーストップを追加し、位置を調整してグラデーションを微調整します。
角度を調整
角度スライダーでグラデーションの方向を制御します。
エクスポート
ウェブサイト用に CSS コードをコピーするか、PNG 画像としてダウンロードします。
よくある質問
どんな種類のグラデーションを作成できますか？
3種類作成できます：線形グラデーション（直線的な色の遷移）、放射状グラデーション（中心からの円形の色の遷移）、円錐型グラデーション（円グラフのような中心点周りの色の遷移）。
生成された CSS コードはそのまま使えますか？
はい！CSS コピーボタンをクリックしてコードをコピーし、CSS ファイルに background プロパティとして直接貼り付けできます。すべてのモダンブラウザで動作します。
ダウンロードできる画像の最大サイズは？
出力サイズは最大 4096 x 4096 ピクセルまで設定可能です。デフォルトは 800 x 600 ピクセルで、ほとんどのウェブ背景に適しています。
カラーストップはどのように機能しますか？
カラーストップはグラデーション内の色とその表示位置を定義します。各ストップには色と位置（0-100%）があります。最低 2 つ必要で、複雑なグラデーションにはさらに追加できます。
データは安全ですか？
完全に安全です。すべてのグラデーション生成は Canvas を使用してブラウザ内で行われます。データがサーバーに送信されることはありません。
活用シーン
ウェブデザインの背景
カスタム CSS グラデーションで、ブランドに合った目を引くヒーローセクション、バナー、ページ背景を作成。
SNS グラフィック
SNS 投稿、ストーリー、カバー画像用に、フィードで目立つ鮮やかなグラデーション背景を生成。
プレゼンテーションスライド
滑らかな色の遷移でプレゼンテーションを引き立てる、プロフェッショナルなスライド背景をデザイン。
UI 要素
ボタン、カード、ナビゲーションバーなどの UI コンポーネントにグラデーション背景を追加して、モダンなデザインに。
メールデザイン
CSS グラデーションがサポートされないメールのヘッダーや背景用にグラデーション画像をダウンロード。
アプリデザインとプロトタイプ
グラデーション背景でアプリ画面を素早くプロトタイプ化。Web 用 CSS またはネイティブアプリモックアップ用 PNG をエクスポート。
完璧なグラデーションを作成
ライブプレビューで美しいグラデーションをデザイン。CSS コピーまたは PNG ダウンロード - 無料で簡単。