CSS グラデーション ジェネレーター
この無料のオンラインツールで美しいCSSグラデーションを簡単に作成できます。線形および放射状のグラデーション、複数のカラーストップ、および角度調整をサポートします。
CSS グラデーション ジェネレーター
この無料のオンラインツールで美しいCSSグラデーションを簡単に作成できます。線形および放射状のグラデーション、複数のカラーストップ、および角度調整をサポートします。
CSS グラデーションについて
標準の background 宣言を出力
線形グラデーションは選択した角度を度数で使い、放射状グラデーションは circle または ellipse の形状を使います。コピーされる結果は、スタイルシートへ貼り付けられる 1 つの background 宣言です。
カラーストップは位置順に並ぶ
複数のカラーストップを追加し、それぞれの色と 0 から 100 percent の位置を設定できます。生成される CSS は stop を位置順に並べてから結合するため、グラデーション宣言が予測しやすくなります。
3 色の背景：青・紫・ピンク
線形と 90° を選び、#2563eb を 0%、#7c3aed を 50%、#ec4899 を 100% に設定します。色は左から右へ変化します。中央のストップを動かすと紫の位置が変わります。バナーやカードの CSS ルールに次の宣言を貼り付けます： background: linear-gradient(90deg, #2563eb 0%, #7c3aed 50%, #ec4899 100%);
放射状の光：明るい中心から暗い背景へ
放射状と circle を選び、#fef3c7 を 0%、#f59e0b を 35%、#0f172a を 100% に設定します。中央が明るい不透明な背景で、透明な重ね合わせではありません。琥珀色のストップで色の移り変わりを調整できます。ellipse にするとコンテナーの縦横に合わせて形が伸びます： background: radial-gradient(circle, #fef3c7 0%, #f59e0b 35%, #0f172a 100%);
くっきりした色分け：2 色を同じ位置に
線形と 90° を選び、2 つのストップをこの順で設定します：#0f172a を 50%、次に #f8fafc も 50%。位置が同じなら色は混ざらず、左右に明確な境界ができます。両方を 30% に移すと 30 対 70 の色分けになります。繰り返す縞ではなく、1 本の境界です： background: linear-gradient(90deg, #0f172a 50%, #f8fafc 50%);
よくある質問
このテーマに関するよくある疑問と回答をまとめました。
どのグラデーションタイプに対応していますか？
線形と放射状のグラデーションに対応しており、角度、形状、カラーストップの位置を完全に制御できます。
複数のカラーストップを追加できますか？
はい、カスタマイズ可能な位置で必要な数だけカラーストップを追加して、複雑なグラデーション効果を作成できます。
クロスブラウザ対応のコードを生成しますか？
はい、すべてのモダンブラウザで動作する標準的な CSS グラデーション構文を出力します。
データはサーバーに送信されますか？
いいえ、グラデーションCSSの生成はすべてブラウザ内で完結します。色の選択や設定はローカルで処理され、サーバーに送信されることはありません。