CSSグラデーション完全ガイド：線形・放射グラデーションの作成とカスタマイズ方法

グラデーションは、Webページを美しく見せるためによく使用されます。単色でボックスを塗りつぶす代わりに、2色以上の色の遷移を表現できるため、視覚的に魅力的で目を引くデザインが可能になります。

CSSでグラデーションを扱うには、主に2つの関数を使用します：linear-gradient（線形グラデーション）と radial-gradient（放射グラデーション）です。これらを使いこなすことで、多彩な背景表現が実現できます。

このチュートリアルでは、実例を交えながら線形グラデーションと放射グラデーションの作り方を解説します。最後まで読めば、あなたもCSSグラデーションのエキスパートになれるでしょう。

CSSグラデーションの基礎

デザインにおいてグラデーションとは、2色以上の色の間の遷移のことです。単純な遷移だけでなく、角度の指定、複数の色の組み合わせ、さまざまなスタイリングが可能です。

CSSでサポートされているグラデーションは主に以下の2種類です。

• 線形グラデーション（Linear Gradients）
• 放射グラデーション（Radial Gradients）

線形グラデーションは、上から下、左から右など直線的な方向へ色が遷移します。一方、放射グラデーションは、楕円や円などの原点から外側へ向かって色が広がっていきます。

CSSでは、グラデーションは background プロパティ（または background-image）を使って定義します。このプロパティは要素の背景を設定するショートハンドであり、背景色や背景画像などを一括指定できます。

background プロパティの基本構文は以下の通りです。

background: <グラデーション関数>;

それでは、まず線形グラデーションから詳しく見ていきましょう。

CSS線形グラデーション（Linear Gradients）

線形グラデーションは、直線上で2色以上の色を遷移させます。デフォルトでは上から下への方向ですが、任意の方向や角度を指定できます。遷移に含める色のことを「カラーストップ（色停止）」と呼び、色の数に制限はありません。

線形グラデーションの基本構文は以下の通りです。

background: linear-gradient(方向, 色1, 色2, ...);

ここで「方向」はグラデーションの向き（キーワードや角度）を、「色1, 色2...」はカラーストップを表します。

上から下へのグラデーション（デフォルト）

最も基本的な、上から下へ向かうグラデーションです。方向を省略するとこの挙動になります。例えば、#00C9FF（薄い青）から #92FE9D（薄い緑）へ遷移させるコードは以下の通りです。

.gradient {
  background: linear-gradient(#00C9FF, #92FE9D);
}

実行結果：

左から右へのグラデーション

方向に to right を指定すると、左から右へ色が遷移します。

.gradient {
  background: linear-gradient(to right, #00C9FF, #92FE9D);
}

実行結果：

逆に to left とすれば右から左へ、to bottom なら上から下（デフォルトと同じ）、to top なら下から上へ遷移します。

対角線グラデーション

水平・垂直のキーワードを組み合わせると対角線方向のグラデーションが作れます。例えば to top right（左下から右上へ）、to bottom left（右上から左下へ）などです。

左下から右上へ遷移する例：

.gradient {
  background: linear-gradient(to top right, #00C9FF, #92FE9D);
}

実行結果：

グラデーションは左下の青から始まり、右上の緑へ向かって遷移します。

複数のカラーストップ（3色以上の遷移）

カラーストップを3つ以上指定すると、より複雑な多色グラデーションが作れます。左から右へ、薄い青（#00D2FF）→ 薄い緑（#92FE9D）→ 濃い青（#3A47D5）へ遷移させる例：

.gradient {
  background: linear-gradient(to right, #00D2FF, #92FE9D, #3A47D5);
}

実行結果：

指定した順序で左から右へ滑らかに色が変化します。

角度の指定（deg）

キーワード（to right など）の代わりに、角度（deg 単位）で細かく方向を制御できます。角度は最初の引数に指定します。0deg は「下から上（to top）」に相当し、時計回りに増加します。

120度の角度で青から緑へ遷移：

.gradient {
  background: linear-gradient(120deg, #00C9FF, #92FE9D);
}

実行結果：

角度を変えれば（例：40deg）、直感的に思い通りの斜め方向を実現できます。

透過グラデーション（RGBA）

rgba() 関数を使えば、透明度（アルファ値）を含めたグラデーションが可能です。アルファ値は 0（完全透明）〜 1（不透明）で指定します。

左から右へ、青を50%透過（alpha=0.5）、緑を30%透過（alpha=0.7）で遷移：

.gradient {
  background: linear-gradient(to right, rgba(0, 201, 255, 0.5), rgba(146, 254, 157, 0.7));
}

実行結果：

背景が透けて見えるため、重ね合わせなどの表現に役立ちます。

ハードライン（境界線）の作成

通常は滑らかな遷移ですが、カラーストップの位置を同じ値にすると、色の境界をくっきり分ける「ハードライン」が作れます。

構文のイメージ：

linear-gradient(方向, 色1 位置, 色2 同じ位置, ...);

青と緑を50%の位置でパッと切り替える例：

.gradient {
  background: linear-gradient(to right, #00C9FF 50%, #92FE9D 50%);
}

実行結果：

ちょうど中央で色がパッと切り替わっているのがわかります。ストライプ柄などを作る際に応用できます。

CSS放射グラデーション（Radial Gradients）

放射グラデーションは、楕円または円の中心点から外側へ向かって色が広がります。最低2つのカラーストップが必要で、上限はありません。

基本構文：

background: radial-gradient(形状 サイズ 位置, 開始色, 中間色..., 終了色);

各パラメータの意味：

• 形状: ellipse（楕円・デフォルト）または circle（円）
• サイズ: グラデーションの終了範囲を決めるキーワード（farthest-corner デフォルト、closest-side など）
• 位置: 中心点の位置（center デフォルト、at 50px 50px などで任意指定可）
• 開始色・中間色・終了色: カラーストップの列挙

デフォルトの放射グラデーション

形状・サイズ・位置を省略すると、要素の中央に楕円の中心が来て、最も遠い角までグラデーションが広がります。

.gradient {
  background: radial-gradient(#4B6CB7, #D9E7FF);
}

実行結果：

中心から均等に色が広がる、標準的な放射グラデーションです。

カラーストップの位置指定

各色の後にパーセントや長さの単位を付けると、その色が占める範囲を明示できます。デフォルトの均等配分ではなく、任意の比率で色を配置できます。

青（25%）→ 明るい青（50%）→ 紫（25%）の比率で配置：

.gradient {
  background: radial-gradient(#4B6CB7 25%, #D9E7FF 50%, #9198E5 25%);
}

実行結果：

指定した比率通りに色の帯が形成されます。

形状を円（circle）にする

デフォルトの楕円ではなく、正円にしたい場合は最初に circle キーワードを指定します。

.gradient {
  background: radial-gradient(circle, #4B6CB7, #D9E7FF);
}

実行結果：

中心点が正円になり、四隅まで均等に色が広がります。

放射グラデーションの位置指定

at <位置> 構文で中心点の座標を任意に指定できます。また、サイズキーワード（closest-corner, farthest-corner, closest-side, farthest-side）と組み合わせると、グラデーションの終了範囲を制御できます。

円形で、中心を (50px, 50px) にし、最も遠い隅まで広げる例：

.gradient {
  background: radial-gradient(circle farthest-corner at 50px 50px, #4B6CB7, #D9E7FF);
}

実行結果：

中心点が左上付近（50px, 50px）にあり、そこから最も遠い隅（右下）に向かってグラデーションが広がっています。

まとめ

CSSグラデーションは、線形（linear-gradient）と放射（radial-gradient）の2種類があり、方向・角度・色停止・透過・形状・位置など多彩なパラメータで自由自在にカスタマイズできます。

このチュートリアルで紹介したテクニックを組み合わせれば、画像を使わずに軽量で美しい背景やボタン、装飾要素を実装できます。ぜひ実際にコードを書き換えて、理想のグラデーションを探求してみてください。