CSSのグラデーションって、書き始めると意外と奥が深いんですよね。
linear-gradient(red, blue) だけなら誰でも書けるんだけど、StripeとかLinearみたいな「なんか光ってる感じのカッコいい背景」を再現しようとすると、急にハードルが上がります。
このガイドでは、グラデーションの基本から、最近の「OKLCH補間」みたいな新しめのテクニック、そしてみんなが必ずハマる「真ん中が灰色っぽくなる問題」の直し方まで、まとめて話していきます。
読み終わる頃には、自分でゼロから書ける気がしてくるはずです。
そもそも、なんでグラデーションが大事なの？
2010年代では、フラットデザイン全盛期でした。
でも最近はまた、ちょっと立体感のある表現や、ふわっと光ってる感じの背景が増えてきています。
実は、あれを画像なしで実現する方法が、グラデーションなんです。
画像じゃないから、いくら拡大しても劣化しないし、ファイルサイズもゼロ。
アニメーションもさせやすく、ダークモード対応もしやすい。
しかも、ブランドの個性を作る武器にもなる。Stripeの紫からピンクに抜けるあの色とか、見ただけで「あ、Stripeだ」って分かりますよね。
あれと同じことが、自分のサイトでもできるようになります。
線形グラデーション（linear-gradient）
まずは、一番よく使うやつの最小構成はこんな感じです。
background: linear-gradient(#ff7e5f, #feb47b);
これで上から下にグラデーションがかかります。方向を変えたいときは、角度かキーワードを足せが可能です。
background: linear-gradient(135deg, #ff7e5f, #feb47b);
background: linear-gradient(to right, #ff7e5f, #feb47b);ここで、CSSのルールを１つ。
CSSの角度って、上方向が0度で時計回りになっています。
数学で習った座標とは違うから、「90度なのに横向きにならない！」って最初は混乱するかもしれませんが、90degは左から右、180degが上から下、覚えちゃえば早いです。
カラーストップで色を細かく指定
色は2つだけじゃなくて、位置やパーセントも好きなだけ追加できます。
background: linear-gradient(
90deg,
#0f172a 0%,
#1e3a8a 40%,
#7c3aed 70%,
#ec4899 100%
);
パーセントを書かなければ、ブラウザが勝手に等間隔で配置してくれます。
同じ位置に2色置くと（red 50%, blue 50%みたいに）、そこでパキッと色が切り替わって、ストライプ柄が作れます。
円形グラデーション（radial-gradient）
中心から外側に広がるタイプ。
スポットライトとか、光ってるボタン、ふわっとした背景に使えます。
background: radial-gradient(circle at center, #fbbf24, #b45309);形（circleかellipse）、サイズ、中心位置（at top leftとかat 30% 70%）を変えられます。
ヒーローセクション（Webサイトのトップページ最上部）にこっそり仕込むと、めちゃくちゃ雰囲気が出ます。
background: radial-gradient(
ellipse at top,
rgba(124, 58, 237, 0.4),
transparent 60%
), #0f172a;
ここで注目したいのが、グラデーションをカンマで区切って何個も重ねられるってこと。
上のレイヤーが透明な部分から、下のレイヤーが透けて見える仕組み。
これを覚えると、表現の幅が一気に広がります。
円錐グラデーション（conic-gradient）
これは時計の針みたいに、中心を軸にぐるっと回るタイプ。
円グラフとか、カラーホイール、虹色の背景なんかが1行で書けます。
background: conic-gradient(
from 0deg at 50% 50%,
#ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6, #ef4444
);
最初の色を最後にもう一回書くと、つなぎ目が目立たなくなります。
もし円グラフを作りたければ、パーセントで区切ればOKです。
background: conic-gradient(
#3b82f6 0% 25%,
#10b981 25% 60%,
#f59e0b 60% 100%
);これでもう、Chart.jsとか入れる必要なくない？って気持ちになってくるはずです。
「真ん中が灰色問題」の正体と直し方
ここからが本題かもしれません。
linear-gradient(blue, yellow) って書いたことある人なら分かると思いますが、真ん中がなんか濁った緑っぽくなるんですよね。
あれ、すごく気持ち悪いじゃないですか。
原因は、ブラウザがデフォルトで「sRGB」っていう色空間で色を補間してるから。
sRGBは人間の見え方とズレてるから、明るい色同士を混ぜると暗くなってしまいます。
最近のCSSでは、inキーワードで補間方法を指定できます：
background: linear-gradient(in oklch, blue, yellow);oklchは人間の知覚に合わせた色空間で、真ん中もちゃんと明るく鮮やかに見えます。
試してもらうと、ほんとに別物だってわかると思います。
oklab、lch、hslなんかも使えるけど、迷ったらとりあえずoklchにしておきましょう。
ただ、HEXとOKLCHを行ったり来たりするのは大変なので、変換ツールに頼っちゃいましょう。
グラデーションをアニメーションさせる
background-imageはtransitionで直接アニメーションできません。
回避策として、大きめのグラデーションを作ってbackground-positionを動かす方法が定番です。
.button {
background: linear-gradient(90deg, #ec4899, #8b5cf6, #3b82f6, #ec4899);
background-size: 300% 100%;
transition: background-position 0.6s ease;
}
.button:hover {
background-position: 100% 0;
}ホバーしたときにスーッと色が流れる感じになって、結構リッチに見えますし、コストもほぼゼロです。
メッシュグラデーションを擬似的に作る
本物のメッシュグラデーションはまだCSSでは難しいですが、radial-gradientを何個も重ねれば、それっぽいものが作れます。
background:
radial-gradient(at 20% 20%, #f472b6 0px, transparent 50%),
radial-gradient(at 80% 0%, #818cf8 0px, transparent 50%),
radial-gradient(at 0% 50%, #34d399 0px, transparent 50%),
radial-gradient(at 80% 80%, #fbbf24 0px, transparent 50%),
#0f172a;色の塊がにじみ合って、水彩画みたいなふわっとした背景になります。
最近のランディングページでよく見るやつですね。
位置とサイズをちょこちょこ調整しながら、自分の好みの組み合わせを探すのも楽しいかもしれません。
色選びのコツ
どんなにテクニックを駆使しても、色の組み合わせがダサくなってしまうことも。
逆に色さえ合ってれば、シンプルな2色でも十分カッコよくなります。
経験則としては、色相環で近い色を選ぶと「調和」、真反対の色を選ぶと「ドラマチック」に。
中途半端な距離だと、さっき話した「灰色問題」が起きやすくなります。
あと、彩度はストップ間で揃えたほうが綺麗にまとまります。
色のアイデアがないときは、好きな画像から色を拾ってくるのが一番早いかもしれません。
パフォーマンスの話
グラデーションは軽い、けどメリットばかりではありません。
1要素に1個ならほぼ無視できますが、フルスクリーンのヒーローに10個重ねてfilter: blurまでかけると、安いスマホだとガクッとフレームレートが落ちます。
アニメーションさせるなら、background-positionよりtransformやopacityのほうが軽いので、できればそっちがおすすめ。
あと、グラデーション背景って印刷すると忠実に再現されないこともあるので、印刷も気にするなら単色のフォールバックを用意しといたほうが安全です。
全部盛りのサンプル
最後に、ここまで話したテクニックを全部使ったヒーロー背景を貼っときます。
.hero {
background:
linear-gradient(in oklch, rgba(15,23,42,0) 0%, rgba(15,23,42,0.6) 100%),
radial-gradient(ellipse at 20% 30%, rgba(124,58,237,0.5), transparent 60%),
radial-gradient(ellipse at 80% 70%, rgba(236,72,153,0.4), transparent 60%),
#0f172a;
}これだけで、それっぽいヒーローセクションが完成します。
デザインに半日かけたみたいな顔して使ってOKですよ。
まとめ
グラデーションって、CSSの中でもコスパ最強の表現手段じゃないかと思います。
軽いし、スケールするし、画像なしでサイトに命を吹き込める。
文法も思ってるより柔軟で、慣れちゃえば最近のモダンな背景はだいたい手で書けるようになります。
とはいえ、細かい調整を手書きでやるのはしんどいので、ジェネレーターでアタリを作ってからコードに落とすのが現実的。
特にブランドカラーに合わせ込みたいときは、ライブプレビュー見ながらいじれるツールを使ったほうが圧倒的に早いです。