backgroundとbackground-imageの違いは？

どちらでもグラデーションを指定できます。backgroundはショートハンドプロパティのため、background-repeatやbackground-colorなど他のサブプロパティも同時にリセットします。既存のbackground-colorを維持したまま画像だけ変えたい場合はbackground-imageを使うと安全です。

borderにグラデーションを使えますか？

2つの方法があります。border-image: linear-gradient(...) 1を使う方法は記述が簡単ですが、border-radiusと共存できません。もう一つは::before疑似要素にグラデーション背景を設定して要素の裏に敷く方法で、こちらは角丸ボーダーにも対応しています。

テキストにグラデーションをかけるには？

backgroundにグラデーションを設定したうえで、-webkit-background-clip: text・background-clip: text・color: transparentの3つを組み合わせます。これによりグラデーション背景がテキストの輪郭でクリッピングされ、文字がグラデーション色になります。

transparentを使うと中間がグレーになります

transparentはブラウザ内部でrgba(0,0,0,0)として扱われるため、不透明な色から透明へ変化する途中でRGB値が黒（0,0,0）に近づきグレーがかって見えます。解決策は終点にrgba(R,G,B,0)を使うことです。例えば青からのフェードならrgba(59,130,246,0)を指定すると、色相を保ったまま自然に透明になります。

背景画像にグラデーションをかぶせるには？

backgroundプロパティの値をカンマで区切って複数指定します。最初に書いたものが最前面です。例えばbackground: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.8)), url('image.jpg') center/cover no-repeat;のようにグラデーションを前面・画像を背面に重ねます。

CSSグラデーションのブラウザ対応状況は？

linear-gradientとradial-gradientはすべての現行ブラウザ（Chrome・Firefox・Safari・Edge）で対応済みです。conic-gradientはChrome 69・Firefox 83・Safari 12.1（いずれも2021年頃）以降から対応しています。現在はベンダープレフィックス（-webkit-など）は不要です。

linear-gradientのデフォルト方向は？

方向を省略した場合のデフォルトはto bottom（上 → 下）です。角度で表すと180degに相当します。角度の基準は「0degが下から上（↑）、90degが左から右（→）、180degが上から下（↓）」です。

コードを手書きせずにグラデーションを作るには？

当サイトのCSSグラデーションジェネレーターを使えば、カラーストップの色・位置・透明度をGUIで視覚的に調整し、生成されたコードをワンクリックでコピーできます。

デザイン2026-03-23

CSSグラデーション完全ガイド｜linear・radial・conic + 応用テクニック

CSSのlinear-gradient・radial-gradient・conic-gradientの書き方をコード例で徹底解説。カラーストップの位置・透明度指定、テキストへのグラデーション、ボーダー・オーバーレイへの応用まで実装パターンを網羅します。

Webデザインでグラデーションを使いたいとき、かつては画像ファイルを書き出すのが当たり前でした。しかし現在はCSSだけで、HTTPリクエストを増やさずに高品質なグラデーションを実装できます。解像度にも依存しないため、Retina（高DPI）ディスプレイでも常にシャープに表示されます。

本記事ではlinear-gradient・radial-gradient・conic-gradientの3種類を完全網羅し、テキストへの適用・グラデーションボーダー・重ね合わせなどの応用テクニックまで実践的なコード例とともに解説します。

CSSグラデーションとは？

CSSグラデーションとは、2色以上の色を滑らかにつなげて表示するCSSの機能です。backgroundプロパティまたはbackground-imageプロパティの値として指定します。画像ファイルを必要としないため、

HTTPリクエストを削減してページ表示速度を向上させられる
どんな解像度・ズーム倍率でもピクセル劣化しない
CSSの変数やカスタムプロパティと組み合わせて動的に変更できる
ファイルサイズがほぼゼロ（コード数行で済む）

という利点があります。background（ショートハンド）とbackground-imageのどちらでも使えます。

種類	関数	主な用途
リニア（直線）	`linear-gradient()`	背景・ボタン・ヘッダー
放射状	`radial-gradient()`	グロー・スポットライト・バッジ
扇形（コニック）	`conic-gradient()`	円グラフ・カラーホイール・進捗リング

linear-gradient（リニアグラデーション）の書き方

最もよく使われるグラデーションです。基本構文は次のとおりです。

background: linear-gradient(方向, カラーストップ1, カラーストップ2, ...);

方向はto rightのようなキーワード、または45degのような角度で指定します。

値	方向
`to right`	左 → 右
`to bottom`	上 → 下（省略時のデフォルト）
`to bottom right`	斜め ↘（左上 → 右下）
`45deg`	45度（↗ 方向）
`135deg`	135度（↘ 方向）

/* 左から右へ、青 → 紫 */
background: linear-gradient(to right, #3B82F6, #8B5CF6);

/* 斜め45度、ピンク → オレンジ */
background: linear-gradient(45deg, #EC4899, #F59E0B);

/* 3色以上のグラデーション */
background: linear-gradient(to right, #06B6D4, #3B82F6, #8B5CF6);

カラーストップ（位置指定）

各カラーストップの後ろにパーセントまたはpx値を付けることで、色が変化する位置を細かく制御できます。同じ位置に2色を並べると「ハードストップ」になり、グラデーションなしの急な切り替えが作れます。

/* 左40%は青で止まり、そこから紫へ */
background: linear-gradient(to right, #3B82F6 40%, #8B5CF6);

/* ハードストップ：グラデーションなしの2分割 */
background: linear-gradient(to right, #3B82F6 50%, #8B5CF6 50%);

/* ストライプ柄（4色均等） */
background: linear-gradient(to right,
  #3B82F6 0%,  #3B82F6 25%,
  #8B5CF6 25%, #8B5CF6 50%,
  #EC4899 50%, #EC4899 75%,
  #F59E0B 75%);

透明度の活用

transparentキーワードやrgba()を使うことで、色が徐々に消えるフェード効果を作れます。画像の上に重ねるオーバーレイとして特に重宝します。色の指定方法についてはカラーコードの記事も参考にしてください。

/* 下へ向かってフェードアウト */
background: linear-gradient(to bottom, #3B82F6, transparent);

/* 画像オーバーレイ（::after 疑似要素に使用） */
background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.8));

/* rgba で正確なアルファ指定（透明部分の色相を保つ） */
background: linear-gradient(to right, rgba(59,130,246,1), rgba(59,130,246,0));

radial-gradient（放射状グラデーション）の書き方

中心点から外側に向かって色が広がるグラデーションです。グロー効果やスポットライト、バッジの光沢表現に向いています。

background: radial-gradient(形状 サイズ at 位置, カラーストップ1, カラーストップ2);

形状はcircle（正円）またはellipse（楕円、デフォルト）です。circleを指定すると要素の縦横に関わらず常に正円形になります。

/* 中心から外側へ白 → 青（正円） */
background: radial-gradient(circle, #ffffff, #3B82F6);

/* ぼんやりした背景光（楕円・中央） */
background: radial-gradient(ellipse at center, #DBEAFE 0%, transparent 70%);

/* オフセット中心のスポットライト */
background: radial-gradient(circle at 30% 40%, #FEF3C7, #F59E0B 60%, #DC2626);

中心位置はat top left・at center・at 30% 70%のように、キーワードまたはパーセントで指定できます。中心をずらすだけでスポットライトや照明のような表現が簡単に作れます。

conic-gradient（扇形グラデーション）の書き方

円の中心を軸に、時計回りに色が変化するグラデーションです。円グラフや進捗リング、カラーホイールの実装に最適です。

background: conic-gradient(from 角度, カラーストップ1, カラーストップ2);

/* 円グラフ：60% 青、40% 紫 */
background: conic-gradient(#3B82F6 60%, #8B5CF6 60%);

/* 進捗リング（border-radius: 50% と組み合わせ） */
background: conic-gradient(#22C55E 75%, #E5E7EB 75%);
border-radius: 50%;

/* カラーホイール */
background: conic-gradient(
  hsl(0,   100%, 50%),
  hsl(90,  100%, 50%),
  hsl(180, 100%, 50%),
  hsl(270, 100%, 50%),
  hsl(360, 100%, 50%)
);

from Ndegを先頭に付けると開始角度を変更できます。例えばfrom -90degにすると12時の位置（真上）から始まる円グラフになり、直感的なデザインに合わせやすくなります。

/* 12時スタートの進捗リング（75%完了） */
background: conic-gradient(from -90deg, #3B82F6 75%, #E5E7EB 75%);
border-radius: 50%;

応用テクニック

テキストへのグラデーション適用

見出しや強調テキストにグラデーションをかける定番テクニックです。background-clip: textでグラデーション背景をテキストの形に切り抜き、color: transparentで元の文字色を透明にすることで実現します。

.gradient-text {
  background: linear-gradient(90deg, #3B82F6, #8B5CF6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

グラデーションボーダー（::before 疑似要素）

border-imageを使う方法もありますが、border-radiusと共存できません。疑似要素を使う方法なら角丸ボーダーとグラデーションを同時に適用できます。

.gradient-border {
  position: relative;
  background: var(--surface);
  border-radius: 12px;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  background: linear-gradient(135deg, #3B82F6, #8B5CF6, #EC4899);
  z-index: -1;
}

グラデーションの重ね合わせ

backgroundプロパティの値をカンマで区切ると、複数のグラデーション（または画像）を重ねられます。最初に書いたものが最前面に表示されます。

/* 2つのグラデーションを重ねる */
background:
  linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.7)),
  linear-gradient(135deg, #667eea 0%, #764ba2 100%);

repeating-linear-gradient（繰り返しパターン）

指定したパターンを繰り返すrepeating-linear-gradientを使うと、ストライプや格子柄などのパターン背景を純粋なCSSで作れます。

/* 斜めストライプ */
background: repeating-linear-gradient(
  45deg,
  #3B82F6 0px,
  #3B82F6 10px,
  transparent 10px,
  transparent 20px
);

実装パターン集

ヒーローセクション背景

ページのメインビジュアルに使うシンプルで映えるパターンです。

.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  color: white;
}

グラデーションボタン

ホバー時にopacityで明度を下げるとグラデーションを維持したまま暗くできます。

.btn-primary {
  background: linear-gradient(to right, #3B82F6, #8B5CF6);
  color: white;
  border: none;
  padding: 12px 28px;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity .2s;
}

.btn-primary:hover { opacity: .88; }

画像オーバーレイ（カード下部を暗くする）

カードの画像下部にテキストを読みやすく重ねるための定番パターンです。::after疑似要素を使うことで、元のimg要素を変更せずに重ねられます。グラデーション上のテキストのコントラスト比には注意が必要です。

.card-image {
  position: relative;
}

.card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.75));
  border-radius: inherit;
}

プログレスバー

進捗状況を示すバーにグラデーションを加えると、視覚的な立体感が生まれます。

.progress-bar {
  height: 8px;
  background: linear-gradient(to right, #22C55E, #86EFAC);
  border-radius: 4px;
}

よくある質問（FAQ）

backgroundとbackground-imageの違いは？: どちらでもグラデーションを指定できます。backgroundはショートハンドプロパティのため、background-repeatやbackground-colorなど他のサブプロパティも同時にリセットします。既存のbackground-colorを維持したまま画像だけ変えたい場合はbackground-imageを使うと安全です。
borderにグラデーションを使えますか？: 2つの方法があります。border-image: linear-gradient(...) 1を使う方法は記述が簡単ですが、border-radiusと共存できません。もう一つは::before疑似要素にグラデーション背景を設定して要素の裏に敷く方法で、こちらは角丸ボーダーにも対応しています。
テキストにグラデーションをかけるには？: backgroundにグラデーションを設定したうえで、-webkit-background-clip: text・background-clip: text・color: transparentの3つを組み合わせます。これによりグラデーション背景がテキストの輪郭でクリッピングされ、文字がグラデーション色になります。
transparentを使うと中間がグレーになります: transparentはブラウザ内部でrgba(0,0,0,0)として扱われるため、不透明な色から透明へ変化する途中でRGB値が黒（0,0,0）に近づきグレーがかって見えます。解決策は終点にrgba(R,G,B,0)を使うことです。例えば青からのフェードならrgba(59,130,246,0)を指定すると、色相を保ったまま自然に透明になります。
背景画像にグラデーションをかぶせるには？: backgroundプロパティの値をカンマで区切って複数指定します。最初に書いたものが最前面です。例えばbackground: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.8)), url('image.jpg') center/cover no-repeat;のようにグラデーションを前面・画像を背面に重ねます。
CSSグラデーションのブラウザ対応状況は？: linear-gradientとradial-gradientはすべての現行ブラウザ（Chrome・Firefox・Safari・Edge）で対応済みです。conic-gradientはChrome 69・Firefox 83・Safari 12.1（いずれも2021年頃）以降から対応しています。現在はベンダープレフィックス（-webkit-など）は不要です。
linear-gradientのデフォルト方向は？: 方向を省略した場合のデフォルトはto bottom（上 → 下）です。角度で表すと180degに相当します。角度の基準は「0degが下から上（↑）、90degが左から右（→）、180degが上から下（↓）」です。
コードを手書きせずにグラデーションを作るには？: 当サイトのCSSグラデーションジェネレーターを使えば、カラーストップの色・位置・透明度をGUIで視覚的に調整し、生成されたコードをワンクリックでコピーできます。

まとめ

CSSグラデーションはbackgroundまたはbackground-imageに指定するだけで使える、画像不要のテクニック
直線（linear-gradient）・放射状（radial-gradient）・扇形（conic-gradient）の3種類を状況に応じて使い分ける
カラーストップの位置指定とハードストップを活用すると、縞模様や円グラフも純粋なCSSで実装できる
background-clip: textとの組み合わせでテキストへのグラデーション適用、疑似要素との組み合わせで角丸グラデーションボーダーが作れる
グラデーションをカンマで重ねることで、画像オーバーレイや複雑な背景も1つのbackground宣言で表現できる
transparent使用時の「グレー問題」は、終点をrgba(R,G,B,0)に変えることで解決できる