単色の背景をグラデーションに変えるだけで、ページの印象は驚くほどリッチになります。この記事は、linear-gradientの基本の書き方と、そのまま使えるおしゃれな配色・応用ワザを動くデモつきでまとめました。コピペして色コードを差し替えるだけです。
基本の書き方
グラデーションはbackgroundにlinear-gradient(向き, 色1, 色2)と書きます。色を2つ選んで並べるだけです。
background: linear-gradient(135deg, #ff8a3d, #ff5e78);135degは色が流れる向きです。0degが下から上、90degが左から右、180degが上から下。迷ったら左上から右下へ流れる135degが、いちばん自然に見えます。
そのまま使える配色8種
「どの2色をつなぐか」がグラデーションのすべて。相性のいい組み合わせを8種類そろえました。気に入った1行をコピーしてください。
/* ゆうやけ */ background: linear-gradient(135deg, #ff8a3d, #ff5e78);
/* うみ */ background: linear-gradient(135deg, #2193b0, #6dd5ed);
/* わかば */ background: linear-gradient(135deg, #56ab2f, #a8e063);
/* よぞら */ background: linear-gradient(135deg, #232526, #414345);
/* ピーチ */ background: linear-gradient(135deg, #ffecd2, #fcb69f);
/* ソーダ */ background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
/* ラベンダー */ background: linear-gradient(135deg, #a18cd1, #fbc2eb);
/* あさやけ */ background: linear-gradient(135deg, #f6d365, #fda085);コツは色相環で近い2色をつなぐこと。オレンジとピンク、青と水色のような「おとなり」の組み合わせは、間がにごらずきれいにつながります。
応用ワザ
円形グラデーション
中心から外へ広がるradial-gradient。スポットライトのような、やわらかい奥行きが出ます。
background: radial-gradient(circle at 50% 30%, #6dd5ed, #2193b0 70%);circle at 50% 30%は光の中心の位置（横50%・縦30%）。中心を少し上にずらすと、上から照らされたような自然な立体感になります。
グラデーション文字
見出しの文字そのものをグラデーションで塗る、ここぞという場面のワザです。
.gradient-text {
background: linear-gradient(135deg, #ff8a3d, #ff5e78);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}仕組みは「背景のグラデーションを文字の形で切り抜き、文字色を透明にして背景を見せる」。3行セットでひとつの技なので、まとめてコピーしてください。
画面いっぱいのヒーロー背景
ページの最初の画面（ファーストビュー）をグラデーションで塗ると、それだけでLPらしくなります。
.hero {
min-height: 100vh;
background: linear-gradient(160deg, #7c5cff, #ff5e78);
}100vhが「画面の高さいっぱい」。グラデーションの上の文字は白＋少し透明度を下げると、うるさくなりません。
ゆっくり動くグラデーション背景
グラデーションを大きめに作っておいて、背景の位置をアニメーションでゆっくり往復させます。じっと見ないと気づかないくらいの動きが、いちばん上品です。
.animated {
background: linear-gradient(135deg, #6dd5ed, #7c5cff, #ff5e78);
background-size: 300% 300%;
animation: flow 6s ease-in-out infinite alternate;
}
@keyframes flow {
from { background-position: 0% 50%; }
to { background-position: 100% 50%; }
}background-size: 300%で背景を3倍の大きさに広げておき、見えている窓の位置（background-position）を動かす仕組みです。
ストライプ模様
repeating-linear-gradientを使うと、グラデーションの仕組みでしま模様が描けます。色の切り替えをぼかさず、同じ位置で区切るのがポイントです。
background: repeating-linear-gradient(
45deg,
#ff8a3d 0 16px,
#ffe8d6 16px 32px
);#ff8a3d 0 16pxは「0〜16pxまでこの色をベタ塗り」の意味。境目をぼかさないので、くっきりしたしま模様になります。数字を変えると、しまの太さが変わります。
扇形に広がるグラデーション（conic-gradient）
conic-gradientは、時計の針のように中心を軸にぐるっと色が変わるグラデーションです。色の目盛りをそのまま並べれば、簡易的な円グラフにも使えます。
background: conic-gradient(
#ff8a3d 0 40%,
#7c5cff 40% 70%,
#2ec46f 70% 100%
);0 40%は「0%〜40%の範囲をこの色で」という意味。linear-gradientが直線、radial-gradientが円形なら、conic-gradientは分度器のように角度で塗り分けると覚えると整理しやすいです。
グラデーションが変になるときのチェックリスト
- そもそも表示されない →
background-colorに書いていませんか？グラデーションはbackgroundへ - 文字グラデーションで文字が消えた →
background-clip: textと-webkit-background-clip: textの2行はセットで必要です - 間がにごって汚い → 離れた色相をつないでいませんか？間に中間色を1つはさむときれいになります
- ボタンのホバーでグラデーションが変化しない →
backgroundのグラデーションはtransitionで徐々に変化できません。上に半透明の層を重ねて、その透明度を変えるのが定番の回避策です
まとめ
- 基本は
linear-gradient(135deg, 色1, 色2)——近い色相の2色をつなぐと上品にまとまる - 文字の切り抜き（
background-clip: text）やゆっくり動く背景で、ここぞの場面を演出できる - グラデーションは「色」ではなく「画像」あつかい——
background-colorには書けない
単色のヒーローやボタンをひとつグラデーションに変えるだけで、ページの空気が変わります。まずは配色8種から1つ、試してみてください。