linear-gradient は「色を滑らかにつなぐ」背景デザインの基本
背景色をただ塗るだけではなく、
色と色を自然につなげて“奥行き・光・立体感”を作る のが linear-gradient() です。
ボタン・背景・カード・オーバーレイ・見出し装飾など、
UI デザインのあらゆる場面で使われる超重要テクニック。
ここでは CSS と Tailwind CSS の両方で、
初心者でも迷わないように例題を交えて丁寧に解説します。
linear-gradient の基本構造
linear-gradient(方向, 色1, 色2, 色3, ...)
方向は以下のように指定できます。
- to bottom（上 → 下）
- to right（左 → 右）
- 45deg（角度で指定）
- 180deg（下方向）
色は何色でも OK。
透明色（rgba）も使えます。
例1：上から下へのシンプルなグラデーション
CSS 版
.box {
background: linear-gradient(to bottom, #3b82f6, #1e40af);
padding: 2rem;
color: white;
}
Tailwind 版（任意値）
<div class="bg-[linear-gradient(to_bottom,#3b82f6,#1e40af)] p-8 text-white">
シンプルな縦グラデーション
</div>
深掘りポイント
2色のグラデーションは「奥行き」を作るのに最適。
ボタンやセクション背景でよく使います。
例2：左から右へのグラデーション
CSS 版
.box {
background: linear-gradient(to right, #ec4899, #8b5cf6);
}
Tailwind 版
<div class="bg-[linear-gradient(to_right,#ec4899,#8b5cf6)] p-8 text-white">
横方向グラデーション
</div>
深掘りポイント
横方向は「流れ」や「スピード感」を演出できます。
例3：透明色を混ぜて“フェード”を作る（画像の上に文字を置く時に最強）
CSS 版
.overlay {
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.6) 100%
);
}
Tailwind 版
<div class="bg-[linear-gradient(to_bottom,rgba(0,0,0,0),rgba(0,0,0,0.6))] h-40">
</div>
深掘りポイント
透明 → 半透明 のグラデーションは
画像の上に文字を置くときの“読みやすさ確保”に必須。
例4：ボタンにグラデーションを使う（モダン UI）
CSS 版
.button {
background: linear-gradient(to right, #3b82f6, #06b6d4);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
}
Tailwind 版
<button class="px-6 py-3 text-white rounded bg-[linear-gradient(to_right,#3b82f6,#06b6d4)]">
グラデーションボタン
</button>
深掘りポイント
グラデーションボタンは「高級感」「モダンさ」を演出できます。
例5：角度を指定して斜めグラデーション
CSS 版
.box {
background: linear-gradient(135deg, #f59e0b, #ef4444);
}
Tailwind 版
<div class="bg-[linear-gradient(135deg,#f59e0b,#ef4444)] p-8 text-white">
斜めグラデーション
</div>
深掘りポイント
角度を使うと「動き」「エネルギー」を感じるデザインになります。
例6：複数色のグラデーション（3色以上）
CSS 版
.box {
background: linear-gradient(to right, #3b82f6, #8b5cf6, #ec4899);
}
Tailwind 版
<div class="bg-[linear-gradient(to_right,#3b82f6,#8b5cf6,#ec4899)] p-8 text-white">
3色グラデーション
</div>
深掘りポイント
3色以上のグラデーションは「華やか」「ポップ」な印象を作れます。
例7：グラデーションを“文字”に適用する（応用）
CSS 版
.text-gradient {
background: linear-gradient(to right, #3b82f6, #8b5cf6);
-webkit-background-clip: text;
color: transparent;
}
Tailwind 版
<h1 class="text-4xl font-bold bg-[linear-gradient(to_right,#3b82f6,#8b5cf6)]
bg-clip-text text-transparent">
グラデーション文字
</h1>
深掘りポイント
背景を文字に“切り抜く”ことで、
グラデーション文字が作れます。
SNS や LP でよく使われるテクニック。
linear-gradient を使うときの設計ポイント（ここが一番大事）
1. 色の組み合わせは「明度差」を意識
明るい色 → 暗い色
彩度の高い色 → 落ち着いた色
この差があると美しい。
2. 透明色（rgba）を混ぜると応用力が爆上がり
フェード・オーバーレイ・画像の読みやすさ改善に必須。
3. 角度で印象が変わる
0deg → 上から下
90deg → 左から右
135deg → 斜めで動きが出る
4. Tailwind は任意値で自由に書ける
bg-[linear-gradient(...)] が最強。
5. グラデーション文字は背景クリップが鍵
bg-clip-text + text-transparent の組み合わせ。
実務テンプレート：UI でよく使うグラデーションセット
Tailwind 版
<!-- セクション背景 -->
<div class="bg-[linear-gradient(to_bottom,#f3f4f6,#e5e7eb)] p-10">
セクション
</div>
<!-- ボタン -->
<button class="px-6 py-3 rounded text-white bg-[linear-gradient(to_right,#3b82f6,#06b6d4)]">
CTA ボタン
</button>
<!-- オーバーレイ -->
<div class="fixed inset-0 bg-[linear-gradient(to_bottom,rgba(0,0,0,0),rgba(0,0,0,0.6))]"></div>
<!-- グラデーション文字 -->
<h1 class="text-5xl font-bold bg-[linear-gradient(to_right,#3b82f6,#8b5cf6)]
bg-clip-text text-transparent">
Gradient Text
</h1>
まとめ
linear-gradient は
背景・文字・オーバーレイ・ボタン・装飾
あらゆる UI に使える万能デザイン技術です。
ポイントは次の通りです。
- 方向（to bottom / 45deg）で印象が変わる
- 透明色（rgba）を混ぜると応用力が爆上がり
- Tailwind は bg-[linear-gradient(…)] で自由に書ける
- グラデーション文字は bg-clip-text が鍵
- 3色以上のグラデーションで華やかさを演出
