目次
- CSSグラデーションの作り方｜初心者でもわかる色の仕組みと表現のコツ
- グラデーションは大きく3種類ある
- 1. linear-gradient（線形グラデーション）
- どんな見た目？
- CSS例：左→右に広がるグラデーション
- 言葉でイメージすると…
- 角度指定で斜めも作れる
- 2. radial-gradient（円形グラデーション）
- どんな見た目？
- CSS例：中央から外側へ広がる光
- 言葉でイメージすると…
- 楕円形にもできる
- 3. conic-gradient（円錐グラデーション）
- どんな見た目？
- CSS例：扇形に色が広がる
- 言葉でイメージすると…
- 円グラフ風の配色も可能
- グラデーションを綺麗に見せるコツ
- 色の「明度差」を意識する
- 色の「距離（割合）」を変える
- 装飾では「方向」がとても大事
- まとめ
CSSグラデーションの作り方｜初心者でもわかる色の仕組みと表現のコツ
グラデーションは、色が「ゆっくり溶けて混ざっていく」ように見える表現です。
- ボタンを立体的に見せる
- 背景に奥行きを出す
- セクションの切り替わりを柔らかくする
など、Webデザインでとてもよく使われます。
この記事では、画像なしでも頭に情景が浮かぶように
「どの方向へ」「どんなふうに」色が混ざるのかをイメージしながら説明します。
グラデーションは大きく3種類ある
| 種類 | 色の混ざり方のイメージ |
|---|---|
| linear-gradient | 色が「一直線に」横・縦・斜めに流れていく |
| radial-gradient | 真ん中から「丸い波紋」のように広がる |
| conic-gradient | 中心から「扇形」や「円グラフ」のように回転する |
1. linear-gradient（線形グラデーション）
どんな見た目？
まるで夕焼けが空に横方向へ広がっていくような、
一直線の方向に色が伸びていくグラデーションです。
上から下・左から右・斜め方向など自由。
CSS例：左→右に広がるグラデーション
background: linear-gradient(to right, #4087bf, #c2e2fa);言葉でイメージすると…
「左側の濃い青が、右に向かうほど淡く薄くなり、
やがて明るい水色に溶けていく」
角度指定で斜めも作れる
background: linear-gradient(135deg, #f6b7c1, #ffffff);→ 135度は右下方向。
「右下へ向かってだんだん淡くなるピンクの光」
2. radial-gradient（円形グラデーション）
どんな見た目？
スポットライトの光や、
朝日のように中心から広がる光の輪を表現できます。
CSS例：中央から外側へ広がる光
background: radial-gradient(circle, #ffffff, #4087bf);言葉でイメージすると…
「真ん中が白く光り、外側に向かうほど深い青へ沈んでいく」
楕円形にもできる
background: radial-gradient(ellipse, #fff, #c2e2fa);3. conic-gradient（円錐グラデーション）
どんな見た目？
ケーキを扇形に切ったような、
中心からクルッと回転して広がるグラデーション。
CSS例：扇形に色が広がる
background: conic-gradient(#4087bf, #c2e2fa);言葉でイメージすると…
「中心からくるりと色が回転しながら、濃い青から淡い青へ変化する」
円グラフ風の配色も可能
background: conic-gradient(
#4087bf 0deg 120deg,
#c2e2fa 120deg 240deg,
#ffffff 240deg 360deg
);グラデーションを綺麗に見せるコツ
色の「明度差」を意識する
- 明るい色 → 暗い色
- 白 → 色
- 濃い色 → 薄い色
の順で並べると自然な流れに。
色の「距離（割合）」を変える
background: linear-gradient(
to right,
#4087bf 10%,
#c2e2fa 90%
);→ 「一気に明るくなる」「ゆっくり変わる」など表現を調整できる。
装飾では「方向」がとても大事
- ボタン → 上から下へ（立体的に見える）
- 背景 → 横向き or 斜め
- セクション区切り → 斜め方向が映える
まとめ
- グラデーションには linear / radial / conic がある
- 色の流れを「風景」でイメージすると理解しやすい
- 方向・色の距離・明暗差を意識するとデザインが上達する
- グラデーションは CSS だけで美しく表現できる
あなたのデザインでも、色が溶け合う表現をぜひ楽しんでください！