radial-gradientはいつ使う？WEB背景に奥行きを出す配色

WEBサイトの背景が平面的に感じられるときは、CSSのradial-gradient()で一部分だけをやわらかく明るくする方法があります。中心から外側へ色が変わるため、光が広がるような見せ方や、特定の場所へ視線を集める演出に向いています。ただし、色を重ねるだけで必ず奥行きが生まれるわけではありません。ここでは使いどころと配色例、文字を読みにくくしない調整方法を紹介します。

radial-gradientはどんな背景に向いている？

radial-gradient()は、CSS（WEBページの見た目を指定するルール）で、中心から周囲へ色が変化する画像を作る関数です。直線方向に変化するlinear-gradient()と違い、円形や楕円形に色を広げられます。均一な背景に明るい部分を作る、広いヒーロー領域（ページ冒頭で内容を印象づける場所）に控えめな光だまりを置く、といった用途に使えます。

何も指定しなければ中心は要素の中央、形は楕円です。circle at 78% 30%と書くと、円形のグラデーションの中心を左から78%、上から30%の位置へ移せます。横長のバナーなら楕円形、丸い光を強調したいならcircleというように、背景の広さに応じて選びます。

グラデーションはCSS上では「色」ではなく画像の値なので、background-imageに指定します。背景全体の基準色は別にbackground-colorで設定しておくと、透明になった部分にも色が残ります。これは実際の光源や立体形状を再現する機能ではなく、明暗の変化によって奥行きを感じさせるデザイン上の工夫です。

アプリ紹介ページに青い光だまりを作る配色例

制作支援アプリの紹介ページを想定し、広い背景には濃紺■#0D182D、右上の光だまりには青■#5484DCを選びます。青の透明度を中心から外側へ下げることで、周辺の濃紺になだらかにつなげます。左側に内容をまとめれば、装飾と文章の役割も分けやすくなります。

<section class="app-hero">
  <div class="app-hero__panel">
    <h2>制作の進み具合を、ひと目で</h2>
    <p>機能を整理して、作業に集中できます。</p>
    <a class="app-hero__link" href="/features/">機能を確認する</a>
  </div>
</section>

.app-hero {
  display: flex;
  align-items: center;
  min-height: 320px;
  padding: clamp(2rem, 5vw, 4rem);
  background-color: rgb(13 24 45);
  background-image: radial-gradient(
    circle at 78% 30%,
    rgb(84 132 220 / 0.48) 0%,
    rgb(84 132 220 / 0.18) 28%,
    rgb(84 132 220 / 0) 62%
  );
}
.app-hero__panel {
  width: min(100%, 420px);
  padding: 1.5rem;
  border-radius: 1rem;
  background-color: rgb(22 38 66);
  color: rgb(255 255 255);
}
.app-hero__panel p { color: rgb(226 232 240); }
.app-hero__link {
  display: inline-block;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background-color: rgb(220 235 255);
  color: rgb(13 24 45);
  text-decoration: underline;
}
.app-hero__link:focus-visible {
  outline: 3px solid rgb(220 235 255);
  outline-offset: 4px;
}

このコードではrgb(84 132 220 / 0.48)が青を48%の不透明度で重ねる指定、末尾の/ 0が完全に透明な状態です。指定した割合は明るい部分が広がる距離を決める目安で、グラデーションの見た目は領域の縦横比でも変わります。HTML内の/features/はサンプルなので、実際のリンク先に置き換えてください。

文字を置くパネルの背景は青みのある暗色■#162642とし、見出しは白■#FFFFFF、説明文は淡い青灰色■#E2E8F0にします。ボタンには淡い水色■#DCEBFF、ボタン文字には濃紺■#0D182Dを使います。青い光は大きな面積で控えめに、明るいボタンは小さな面積で使うことで、背景と操作の優先順位を分ける構成です。

奥行きを調整するときの文字・スマホ表示の注意点

グラデーション上に文字を直接置くと、文字の背後が場所によって明るくなり、コントラストが変わります。この例では不透明なパネルを使うため、文字とパネルの組み合わせを個別に確認できます。白の見出しと暗色パネルは約15.11:1、淡い青灰色の説明文とパネルは約12.25:1、濃紺のボタン文字と淡い水色のボタンは約14.65:1です。いずれもWCAG 2.2が通常サイズの文字に求める4.5:1を上回ります。

キーボード操作時の枠線にもボタンと同じ淡い水色を使い、パネルとの比率は約12.50:1です。操作を示す枠線など、意味のある非テキスト表示では隣接色との3:1が確認の目安になります。ただし、実際のボタン配置や背景が変われば、その場所でもう一度確かめてください。

光が強すぎて文字より目立つ場合は、不透明度を下げるか、atの位置を文章から離します。スマートフォンではグラデーションの中心がパネルの背後に移ることもあるため、小さな画面で明るさと配置を確認します。radial-gradient()は写真を加工せず背景を演出したい場合にも使えますが、写真と色を混ぜるbackground-blend-modeとは別の仕組みです。HueRollでは元になる色候補や、選択色と白・黒とのコントラストを確認できますが、完成したグラデーション上の任意の文字色を自動判定する機能ではありません。