コンテンツへスキップ

CSSグラデーションジェネレーター

線形・放射・円錐のグラデーションをライブプレビューで作成し、色とストップを調整して、貼り付けるだけのCSSやTailwindコードをコピーできます。

グラデーションの種類

角度

90°

カラーストップ (2)

  • #2C71DE
  • #051938

クリックで追加 · ドラッグで移動

background: linear-gradient(90deg, #2C71DE 0%, #051938 100%);

すぐ使えるCSSグラデーション

クリックするとエディターに読み込まれ、好みに合わせて調整できます。

CSSグラデーションとは？その仕組み

グラデーションとは、2色以上の色のなめらかな移り変わりで、CSSのbackgroundプロパティで背景として使います。単色の代わりに、指定した色の間を、選んだ方向や形で徐々に混ぜ合わせて描画します。

グラデーションの各色はカラーストップで定義します。色のコードと、その色が完全に純色になる位置（パーセント）です。2つのストップの間の移り変わりはブラウザが自動で計算します。シンプルに混ぜるなら2つ、より多くの色調を持たせたいなら複数のストップを追加します。

線形

指定した角度で、色が直線的に移り変わります。最も一般的なタイプで、上から下や斜めなど、はっきりした方向のある背景に最適です。

linear-gradient(90deg, #F97316, #FBBF24)

放射

中心点から外側へ円状に色が広がります。フォーカス、光、奥行きの表現に向いています。

radial-gradient(circle, #FDE68A, #F97316 70%)

円錐

時計の針のように、中心点の周りを色が回転します。最も使われにくいタイプですが、カラーホイール、進捗インジケーター、実験的な表現に便利です。

conic-gradient(from 90deg, #F97316, #FBBF24, #14B8A6, #F97316)

CSSでのグラデーションの書き方

線形グラデーションは、backgroundプロパティ内でlinear-gradient()関数を使って宣言します。各部分は次のとおりです：

135deg
方向。0degは上、90degは右、180degは下向きです。to rightやto bottom rightと書くこともできます。
#FF5F6D
グラデーションの各色。HEX、rgb()、hsl()、oklch()など、どのCSS形式でも使えます。
0%
ストップの位置：その色が純色になる場所です。省略すると、ブラウザが色を均等に配置します。

放射はradial-gradient(circle, …)、円錐はconic-gradient(from 90deg, …)を使い、カラーストップは同じです。

background: linear-gradient(135deg, #FF5F6D 0%, #FFC371 100%);

ジェネレーターの使い方

  1. 種類を選ぶ

    線形・放射・円錐から選びます。線形と円錐では、スライダーや方向ボタンで角度を調整します。

  2. 色とストップを調整

    ストップを選んで色を変更し、バー上でドラッグして移動するか、バーをクリックして追加します。最大8つまで。

  3. コードをコピー

    CSSまたはTailwindのクラスをコピーしてプロジェクトに貼り付けます。個々の色をエクスポートすることもできます。

きれいなグラデーションを作るコツ

  • 色相環で近い色を使う

    色相環で隣り合う色は、なめらかで自然な移り変わりになります。

  • グレーゾーンを避ける

    反対色同士の間は中央がくすみがちです。鮮やかな中間ストップを加えると防げます。

  • ストップは少なめに

    ほとんどの背景は2〜3色で十分です。ストップが多すぎると洗練さが損なわれがちです。

  • 上に載せる文字を読みやすく

    グラデーションの最も明るい色と最も暗い色の両方で、文字のコントラストを確認しましょう。

よくある質問

backgroundプロパティでlinear-gradient()、radial-gradient()、conic-gradient()のいずれかの関数を使い、方向と色を指定します。例：background: linear-gradient(90deg, #2193B0, #6DD5ED);

グラデーションを構成する各色と、その色が純色で表示される位置（パーセント）のことです。2つのストップの間の移り変わりはブラウザが自動で計算します。

線形は角度に沿って直線的に移り変わります。放射は中心点から円状に広がります。円錐は時計の針のように中心点の周りを回ります。

プレビューバーをクリックして、必要なだけ追加できます。2つならシンプルな移り変わり、それ以上なら複数の色調を持つグラデーションになります。

はい。標準のCSSコードに加えて、Tailwind構文の同等コードもコピーできます。

はい。linear-gradient、radial-gradient、conic-gradientは標準のCSSプロパティで、すべてのモダンブラウザが対応しています。

bodyにグラデーションを適用し、少なくともウィンドウの高さを指定します：body { min-height: 100vh; background: linear-gradient(180deg, #EE9CA7, #FFDDE1); }

2つのグラデーション間の切り替えを直接アニメーションすることはできませんが、動かすことはできます。要素より大きいbackground-size（例：200%）を指定し、transitionや@keyframesでbackground-positionをアニメーションさせます。

関連ツール