CSS グラデーションが「のっぺり」する原因と、デザイナーが嫌がらない作り方

導入：「いい感じのグラデを当ててほしい」と頼まれて詰むフロントエンド

男の子

「博士〜！ デザイナーから『ヒーローセクションのグラデが濁って汚い、修正してくれ』って戻ってきたんだぜ…。HEXコードはちゃんと指定通りなのに何が悪いんだぜ？」

博士

「ふむ。それは恐らく linear-gradient(blue, yellow) のような書き方をしておるな？ 補間途中で『泥のような灰色』を経由しておる典型的な失敗じゃよ。」

女の子

「sRGB空間で青と黄を混ぜると、確かに彩度が落ちて灰色っぽくなるのよね。中間色を1つ挟むか、HSLで補間するかで一気に解決するわ。」

1. グラデーションが「のっぺり/濁る」3大原因

博士

「実装現場でよく見る濁りの原因はこの3つに集約されるのじゃ。」

男の子

「うわ、3つとも全部やっちまってたぜ…。」

2. 補間色空間を意識するだけで化ける

CSS Color Module Level 4 から、グラデーションの補間色空間を in oklch や in hsl のように指定できるようになりました。 色相環を経由する補間に切り替えると、彩度を保ったまま自然に変化します。

background: linear-gradient(90deg, #2196f3, #ffeb3b);
/* 中間が灰色っぽくなりがち */

background: linear-gradient(in oklch 90deg, #2196f3, #ffeb3b);
/* 色相環を経由するため、彩度を保ったまま遷移 */

女の子

「OKLCH は人間の知覚に近い色空間だから、明度を一定にしたまま色相だけ動かせるの。デザインシステムのアクセントカラーを作るときも便利よ。」

古いブラウザを考慮するなら「中間ストップ」

in oklch はモダンブラウザでは動きますが、レガシー対応が必要な場合は中間カラーストップを明示的に挟むのが確実です。 例えば青→黄なら、間に「青寄りの紫」「ピンク」など、色相環を時計回りに辿る色を 1〜2 個挟むだけで、濁りは消えます。

3. 線形 / 放射状 / 円錐の使い分け

博士

「グラデーションは大きく3種類じゃ。デザインの意図によって使い分けよ。」

男の子

「conic って初めて使ったぜ。これでドーナツチャート作れるのか！」

4. 実務の「困った」事例集

事例1：iOS Safari で線が見える（バンディング）

グラデーションが帯状の縞として見える現象です。8bit カラーの色解像度が足りないのが原因。 対策は noise() SVG フィルタを薄く重ねるか、半透明の ::after でディザを入れること。 極端な明度差を縮める（白→灰白など）でも軽減できます。

事例2：ボタンのグラデが「ペカペカ」して安っぽい

色差が大きすぎる、もしくは中央がハイライトになっていないケースが多いです。 プロは linear-gradient(180deg, rgba(255,255,255,0.15), rgba(0,0,0,0.05)) を主色の上に重ねて、 立体感だけを軽く付与します。色そのものは単色のまま、です。

事例3：グラデ背景上の文字が読めない

テキストとの間に background-blend-mode: multiply や半透明オーバーレイを挟むのが定石。 WCAG AA 基準（コントラスト比 4.5:1 以上）は、最も明るい点と最も暗い点の両方で確認します。 ヒーローセクションでは「下半分だけグラデを濃くする」テクニックも有効です。

5. 自分で作るより、まず「叩き台」を生成する

ゼロから書くと、角度・色・カラーストップの調整に時間が溶けがちです。 当サイトのCSSグラデーション作成ツールでは、 ビジュアルで色とカラーストップを調整しながら、即座に CSS コードをコピーできます。 生成したコードをベースに、本記事の OKLCH 補間や中間ストップのテクニックを追加して仕上げると、 所要時間が大幅に短縮されます。

関連: Box Shadow 作成、Border Radius 作成 も組み合わせると、UI パーツの試作が一気に進みます。