CSS グラデーションの完全ガイド

CSSのグラデーション（Gradient）は、単色ではなく複数の色を滑らかに変化させる表現方法です。背景やボーダー、文字装飾など、さまざまなデザインに活用できます。本記事では、CSSグラデーションの基本から応用まで詳しく解説します。

1. CSSグラデーションとは？

CSSグラデーションは、background プロパティなどで設定でき、以下の2種類があります。

1. 線形グラデーション（linear-gradient）：直線状に色が変化
2. 放射状グラデーション（radial-gradient）：円形に色が変化

2. 線形グラデーション（Linear Gradient）

線形グラデーションは、linear-gradient() 関数を使って定義します。

基本構文

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

例1：上から下へ（デフォルト）

background: linear-gradient(rgb(226,241,254), rgb(238,230,255), rgb(255,240,255));

例2：左から右へ

background: linear-gradient(to right, rgb(226,241,254), rgb(238,230,255), rgb(255,240,255));

例3：45度の角度

background: linear-gradient(45deg, rgb(226,241,254), rgb(238,230,255), rgb(255,240,255));

例4：途中で色を指定

background: linear-gradient(90deg, rgb(226,241,254) 0%, rgb(238,230,255) 50%, rgb(255,240,255) 100%);

3. 放射状グラデーション（Radial Gradient）

放射状グラデーションは、中心から外に向かって色が変化します。

基本構文

background: radial-gradient(形, 色1, 色2, 色3, ...);

例1：円形グラデーション（デフォルト）

background: radial-gradient(circle, rgb(226,241,254), rgb(238,230,255), rgb(255,240,255));

例2：楕円形グラデーション

background: radial-gradient(ellipse, rgb(226,241,254), rgb(238,230,255), rgb(255,240,255));

例3：グラデーションの中心を変更

background: radial-gradient(circle at 30% 70%, rgb(226,241,254), rgb(238,230,255), rgb(255,240,255));

4. 円錐グラデーション（Conic Gradient）

conic-gradient() を使うと、円の中心から角度に沿って色が変化します。

基本構文

background: conic-gradient(色1, 色2, 色3, ...);

例1：基本的な円錐グラデーション

background: conic-gradient(rgb(226,241,254), rgb(238,230,255), rgb(255,240,255));

例2：グラデーションの角度を調整

background: conic-gradient(from 45deg, rgb(226,241,254), rgb(238,230,255), rgb(255,240,255));

5. グラデーションの応用

5.1 ボーダーにグラデーションを適用

ボーダーには直接グラデーションを適用できませんが、border-image や擬似要素を活用すると実現できます。

.border-grad {
  position: relative;
  display: inline-block;
  padding: 20px;
}

.border-grad::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  padding: 2px;
  background: linear-gradient(180deg, rgb(226,241,254), rgb(238,230,255), rgb(255,240,255));
  -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

5.2 テキストにグラデーションを適用

テキスト自体にグラデーションを適用するには、background-clip: text を使います。

.text-grad {
  background: linear-gradient(90deg, rgb(226,241,254), rgb(238,230,255), rgb(255,240,255));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<p class="text-grad">グラデーションテキスト</p>

6. まとめ

• 線形グラデーション（linear-gradient） は直線状に色が変化
• 放射状グラデーション（radial-gradient） は中心から外に向かって色が変化
• 円錐グラデーション（conic-gradient） は円の角度ごとに色を変化
• ボーダーやテキストにグラデーションを適用することも可能

CSSのグラデーションを活用すれば、シンプルなデザインにアクセントを加えることができます。ぜひ、自分のプロジェクトで試してみてください！