CSSのlinear-gradient（リニアグラデーション）は、背景色を単色ではなく「なめらかに色が変化するグラデーション」にできる便利な機能です。
ボタンや見出しのデザイン、バナー背景など、Webデザインでよく使われています。
しかし、
✅「to rightって何向き？」
✅「角度指定とキーワードの違いは？」
✅「色の位置（カラーストップ）の使い方がわからない…」
と、公式リファレンスでは理解しづらいことも多いですよね。
この記事では、初心者から中級・上級者まで「linear-gradient」を完全に理解できるように、基本構文から応用、他のグラデーションとの違いまで徹底的にわかりやすく解説します。
💡この記事でわかる事
以下の内容を習得することができます：
- linear-gradientとは何か（特徴と役割）
- 基本的な構文と2色グラデーションの作り方
- 方向指定の方法（キーワード vs 角度指定）
- カラーストップで色の位置を細かく制御する方法
- ハードストップを使ったストライプ表現
- repeating-linear-gradientとの違いと使い分け
- radial-gradientやconic-gradientなど他のグラデーション関数との違い
- よくある疑問（ブラウザ対応・パフォーマンスなど）
- 実践で使えるデザイン例や応用テクニック
Contents
CSSのlinear-gradientとは？
linear-gradientは、CSSで線形のグラデーション（色の段階的な変化）を作成するための関数です。
背景色として単色を指定する代わりに、複数の色を滑らかに混ぜ合わせた表現が可能になります。
グラデーションは画像として扱われるため、background-imageプロパティに指定します。
これにより、読み込み時間なしで美しいビジュアルを実現できます。
基本的な例
左から右へのグラデーション
background: linear-gradient(to right, #ff6b6b, #4ecdc4);See the Pen linear gradient background – 背景画像との組み合わせ by naoq (@naoq) on CodePen.
💡 ポイント
linear-gradientは「線形」という意味で、色が一直線に沿って変化していきます。
円形に広がるグラデーションはradial-gradientという別の関数を使用します。
基本的な構文
linear-gradientの基本的な構文は以下の通りです。
background: linear-gradient(方向, 色1, 色2, ...);方向デフォルトで最もシンプルな2色グラデーション
デフォルト（上から下）となっており、方向に指定は省略できます。
/* 方向を省略すると、上から下への自動的になります */
background: linear-gradient(#e74c3c, #3498db);See the Pen linear gradient on background image by naoq (@naoq) on CodePen.
色の指定方法
グラデーションの色は、CSSで使用できるあらゆる色の指定方法が使えます。
- HEX: #ff6b6b
- RGB: rgb(255, 107, 107)
- RGBA: rgba(255, 107, 107, 0.8) ← 透明度も指定可能
- HSL: hsl(0, 100%, 71%)
- 色名: red, blue, purple など
透明度を使ったグラデーション
不透明から透明へ（rgbaの透明度を0,1に）
background: linear-gradient(
to right,
rgba(255, 107, 107, 1),
rgba(255, 107, 107, 0)
);See the Pen CodePen Home linear gradient – by naoq (@naoq) on CodePen.
linear-gradientでグラデーションの方向を指定する
グラデーションの方向は、大きく分けて2つの方法で指定できます。
1. キーワードで指定する（直感的）：
基本的な方向指定（to top, to right, to bottom, to left）
toキーワードを使って、どの方向に向かってグラデーションを描くかを指定します。
/* 上向き */
background: linear-gradient(to top, #f093fb, #f5576c);
/* 右向き */
background: linear-gradient(to right, #4facfe, #00f2fe);
/* 下向き（デフォルト） */
background: linear-gradient(to bottom, #43e97b, #38f9d7);
/* 左向き */
background: linear-gradient(to left, #fa709a, #fee140);See the Pen linear-gradient-方向 by naoq (@naoq) on CodePen.
斜め方向の指定（to top right, to bottom right など）
2つのキーワードを組み合わせることで、斜め方向も指定できます。
/* 右上向き */
background: linear-gradient(to top right, #a8edea, #fed6e3);
/* 右下向き */
background: linear-gradient(to bottom right, #d299c2, #fef9d7);
/* 左下向き */
background: linear-gradient(to bottom left, #96fbc4, #f9f586);
/* 左上向き */
background: linear-gradient(to top left, #ff9a9e, #fecfef);See the Pen linear-gradient 斜め方向の指定（to top right, to bottom right など） by naoq (@naoq) on CodePen.
2. 角度で指定する（正確）
角度を使って、より正確にグラデーションの方向を制御できます。deg（度）単位で指定します。
📐 角度での指定（0deg, 45deg, 90deg など）
- 0deg = 下から上（to top）
- 90deg = 左から右（to right）
- 180deg = 上から下（to bottom）
- 270deg = 右から左（to left）
時計回りに角度が増加します。
/* 0度 = 下から上 */
background: linear-gradient(0deg, #667eea, #764ba2);
/* 45度 = 左下から右上 */
background: linear-gradient(45deg, #667eea, #764ba2);
/* 90度 = 左から右 */
background: linear-gradient(90deg, #667eea, #764ba2);
/* 135度 = 左上から右下 */
background: linear-gradient(135deg, #667eea, #764ba2);
/* 180度 = 上から下 */
background: linear-gradient(180deg, #667eea, #764ba2);
/* 225度 = 右上から左下 */
background: linear-gradient(225deg, #667eea, #764ba2);See the Pen linear-gradient 角度での指定（0deg, 45deg, 90deg など） by naoq (@naoq) on CodePen.
linear-gradientのカラーストップ（色の位置）
カラーストップを使うと、各色がどの位置に配置されるかを細かく制御できます。
位置は%またはpxなどの単位で指定します。
デフォルト（均等配置）
3色を均等に配置
background: linear-gradient( to right, #ff6b6b, #4ecdc4, #f5b7d1 );See the Pen linear-gradient デフォルト（均等配置） by naoq (@naoq) on CodePen.
位置を指定する
最初の色を30%まで、そこから最後の色へ
background: linear-gradient(
to right,
#ff6b6b 0%,/* 開始位置 */
#4ecdc4 30%,/* 30%の位置 */
#f5b7d1 100%/* 終了位置 */
);See the Pen linear-gradient 位置を指定する by naoq (@naoq) on CodePen.
ハードストップ（境界線をくっきり）
中央できっぱり切り替わる
background: linear-gradient(
to right,
#ff6b6b 50%,/* 50%まで赤 */
#4ecdc4 50%/* 50%から青（グラデーションなし） */
);同じ位置に2つの色を指定すると、グラデーションなしでパキッと色が変わります。ストライプ模様などに使えます。
See the Pen linear-gradient ハードストップ（境界線をくっきり） by naoq (@naoq) on CodePen.
補足：その他のグラデーション関数：radial-gradient、conic-gradient、repeating-*系
CSSにはlinear-gradient以外にも、様々なグラデーション関数が用意されています。それぞれの特徴と使い分けを理解しましょう。
1. repeating-linear-gradient（線形グラデーションの繰り返し）
名前の通り、グラデーションパターンを繰り返す機能です。
/* linear-gradient: 1回だけ描画 */
background:linear-gradient( 45deg, #667eea 0%, #764ba2 25%, #667eea 50% );
/* repeating-linear-gradient: パターンを繰り返す */
background:repeating-linear-gradient( 45deg, #667eea 0px, #764ba2 20px, #667eea 40px );See the Pen repeating-linear-gradient（線形グラデーションの繰り返し） by naoq (@naoq) on CodePen.
linear-gradient と repeating-linear-gradient違い
グラデーションが要素全体に1回だけ描画されます。指定した色の範囲が要素いっぱいまで引き伸ばされます。
指定したグラデーションパターンが繰り返されます。ストライプ模様やパターン背景に最適です。
⚠️ 使い分けのポイント
- linear-gradient: 通常のグラデーション背景、オーバーレイ効果、単純な色の変化に使用
- repeating-linear-gradient: ストライプ、チェッカーパターン、装飾的な繰り返し模様に使用
2. radial-gradient（放射状グラデーション）
中心点から外側に向かって放射状に広がるグラデーションを作成します。円形や楕円形のグラデーションに使用します。
基本的な使い方
/* 円形の放射状グラデーション */
background:radial-gradient(circle, #667eea, #764ba2);See the Pen radial-gradient（放射状グラデーション） by naoq (@naoq) on CodePen.
形状と位置の指定
/* 円形 */
background:radial-gradient(circle, #0000ff, #ff0000);
/* 楕円形（デフォルト） */
background:radial-gradient(ellipse, #0000ff, #ff0000);
/* 位置を指定（左上） */
background:radial-gradient(circle at top left, #0000ff, #ff0000);
/* 位置を%で指定 */
background:radial-gradient(circle at 70% 30%, #0000ff, #ff0000);See the Pen radial-gradient（放射状グラデーション）形状と位置の指定 by naoq (@naoq) on CodePen.
💡 radial-gradientの用途
- スポットライト効果
- ビネット効果（写真の四隅を暗くする）
- ボタンのハイライト効果
- 円形のローディングアニメーション
3. repeating-radial-gradient（放射状グラデーションの繰り返し）
放射状のパターンを繰り返します。同心円状の模様を作成するのに便利です。
CSSbackground:repeating-radial-gradient( circle, #667eea, #667eea 10px, #764ba2 10px, #764ba2 20px );See the Pen repeating-radial-gradient（放射状グラデーションの繰り返し） by naoq (@naoq) on CodePen.
4. conic-gradient（円錐形グラデーション）
中心点を軸に回転するようなグラデーションを作成します。カラーホイールやパイチャート、ローディングスピナーなどに最適です。
基本的な使い方
/* 中心を軸に回転するグラデーション */
background:conic-gradient(#667eea, #764ba2, #667eea);See the Pen conic-gradient（円錐形グラデーション） by naoq (@naoq) on CodePen.
角度と位置の指定
/* 開始角度を指定 */
background:conic-gradient(from 0deg, #f093fb, #f5576c, #f093fb);
/* 90度から開始 */
background:conic-gradient(from 90deg, #4facfe, #00f2fe, #4facfe);
/* 中心位置を指定 */
background:conic-gradient(at 30% 30%, #ff0000, #00ff00, #0000ff);
/* パイチャート風 */
background:conic-gradient( #fa709a 0deg, #fa709a 90deg, #fee140 90deg, #fee140 180deg, #fa709a 180deg, #fa709a 270deg, #fee140 270deg );See the Pen conic-gradient（円錐形グラデーション）角度と位置の指定 by naoq (@naoq) on CodePen.
実用例：カラーホイール
/* 虹色のカラーホイール */
background: conic-gradient( red, yellow, lime, aqua, blue, magenta, red );
border-radius: 50%;See the Pen conic-gradient（円錐形グラデーション）実用例：カラーホイール by naoq (@naoq) on CodePen.
💡 conic-gradientの用途
- パイチャート・ドーナツチャート
- プログレスサークル（進捗表示）
- カラーピッカーのホイール
- 時計の文字盤
- ローディングスピナー
グラデーション関数の比較まとめ
| gradient関数 | 特徴 | 用途 |
|---|---|---|
| linear-gradient | 一直線に色が変化 | 背景、オーバーレイ、ボタン |
| radial-gradient | 中心から放射状に変化 | スポットライト、ビネット |
| conic-gradient | 中心を軸に回転 | チャート、スピナー |
| repeating-* 系 | パターンの繰り返し | ストライプ、模様 |
⚠️ ブラウザ対応について
- linear-gradient: すべてのモダンブラウザで完全対応
- radial-gradient: すべてのモダンブラウザで完全対応
- conic-gradient: 比較的新しい機能。IE非対応、Safari 12.1+、Chrome 69+
- repeating-* 系: 対応するグラデーション関数と同じサポート状況
重要な用途で使用する場合は、代替スタイルを用意することをおすすめします。
linear-gradientの使い方によくある質問（FAQ）
Q. linear-gradientはすべてのブラウザで動作しますか？
Q. linear-gradientはすべてのブラウザで動作しますか？
Q. パフォーマンスへの影響は？
Q. グラデーションの色数に制限はありますか？
まとめ：CSS linear-gradientの使い方
この記事では、CSS linear-gradientの基本について学びました
- linear-gradientは線形グラデーションを作成する関数
- background-imageプロパティに指定する
- 方向はキーワード（to right）または角度（90deg）で指定
- カラーストップで色の位置を細かく制御可能
- その他のグラデーション関数 radial-gradient、conic-gradient、repeating-*系
