CSS Tips | 超実務コアCSSテクニック：カラー・背景 － radial-gradient

Web APP CSS
スポンサーリンク

radial-gradient は「光のにじみ・スポットライト」を作る背景テクニック

linear-gradient が「線」で色を変えるのに対して、
radial-gradient は “円や楕円を中心に広がる” グラデーション を作ります。

光が当たっているような表現、
背景にふんわり色をにじませる表現、
ポップな丸いグラフィックなどにとても向いています。

CSS と Tailwind CSS の両方で、
初心者向けにかみ砕いて解説していきます。

radial-gradient の基本構造とイメージ

基本構文

background: radial-gradient(形 大きさ at 位置, 色1, 色2, ...);
CSS

形・大きさ・位置は省略もできますが、
理解しておくと「狙ったデザイン」が作りやすくなります。

主なパラメータ

  • 形：circle（円） / ellipse（楕円・デフォルト）
  • 大きさ：closest-side / farthest-side / closest-corner / farthest-corner / px 指定
  • 位置：at center / at top / at 20% 30% など

例1：一番シンプルな円形グラデーション

CSS 版

.box {
  background: radial-gradient(circle, #3b82f6, #1e40af);
  padding: 2rem;
  color: white;
}
CSS

Tailwind 版（任意値）

<div class="bg-[radial-gradient(circle,#3b82f6,#1e40af)] p-8 text-white">
  円形グラデーション
</div>
HTML

光が中央からふわっと広がるようなイメージになります。

例2：中央から白く光る“スポットライト風”背景

CSS 版

.spot {
  background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(59,130,246,0.2), rgba(15,23,42,1));
  padding: 3rem;
  color: white;
}
CSS

Tailwind 版

<div class="bg-[radial-gradient(circle,rgba(255,255,255,0.9),rgba(59,130,246,0.2),rgba(15,23,42,1))] p-12 text-white">
  スポットライト風
</div>
HTML

透明度を混ぜることで、
「光がにじんでいる」ような柔らかい表現ができます。

例3：位置をずらして“端から光る”背景を作る

CSS 版

.box {
  background: radial-gradient(circle at top left, #f97316, #1e293b);
  padding: 2rem;
  color: white;
}
CSS

Tailwind 版

<div class="bg-[radial-gradient(circle_at_top_left,#f97316,#1e293b)] p-8 text-white">
  左上から光る背景
</div>
HTML

at top left の部分で「光の中心位置」を指定しています。
右下・中央・任意の位置にもできます。

例4：複数の radial-gradient を重ねて“ポップな背景”にする

CSS 版

.fun-bg {
  background:
    radial-gradient(circle at 20% 20%, #f97316, transparent 60%),
    radial-gradient(circle at 80% 30%, #3b82f6, transparent 60%),
    radial-gradient(circle at 30% 80%, #22c55e, transparent 60%),
    #0f172a;
  padding: 3rem;
  color: white;
}
CSS

Tailwind 版

<div class="bg-[radial-gradient(circle_at_20%_20%,#f97316,transparent_60%),radial-gradient(circle_at_80%_30%,#3b82f6,transparent_60%),radial-gradient(circle_at_30%_80%,#22c55e,transparent_60%),#0f172a] p-12 text-white">
  ポップな背景
</div>
HTML

複数の radial-gradient をカンマでつなぐことで、
丸い光がいくつも浮かんでいるような背景が作れます。

例5：カードの背景に“ほんのり光”を足す

CSS 版

.card {
  background:
    radial-gradient(circle at top, rgba(59,130,246,0.25), transparent 60%),
    #ffffff;
  border-radius: 1rem;
  padding: 2rem;
  border: 1px solid #e5e7eb;
}
CSS

Tailwind 版

<div class="bg-[radial-gradient(circle_at_top,rgba(59,130,246,0.25),transparent_60%),#ffffff] rounded-2xl p-8 border border-gray-200">
  ほんのり光るカード
</div>
HTML

「ただの白いカード」よりも、
上部に少し光が入るだけで一気に“デザインされた感”が出ます。

例6：ボタンに radial-gradient で“押したくなる光”を足す

CSS 版

.button {
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.6), transparent 60%),
    linear-gradient(to right, #3b82f6, #1d4ed8);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
}
CSS

Tailwind 版

<button class="px-6 py-3 rounded-full text-white
               bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.6),transparent_60%),linear-gradient(to_right,#3b82f6,#1d4ed8)]">
  光るボタン
</button>
HTML

radial-gradient と linear-gradient を重ねると、
「光沢のある立体ボタン」のような表現ができます。

例7：ヒーローセクションの背景に“奥行き”を出す

CSS 版

.hero {
  background:
    radial-gradient(circle at 20% 20%, rgba(59,130,246,0.35), transparent 60%),
    radial-gradient(circle at 80% 60%, rgba(236,72,153,0.35), transparent 60%),
    #020617;
  color: white;
  padding: 4rem 2rem;
}
CSS

Tailwind 版

<section class="bg-[radial-gradient(circle_at_20%_20%,rgba(59,130,246,0.35),transparent_60%),radial-gradient(circle_at_80%_60%,rgba(236,72,153,0.35),transparent_60%),#020617] text-white py-16 px-6">
  <h1 class="text-4xl font-bold mb-4">ヒーローセクション</h1>
  <p class="text-lg text-gray-200">奥行きのある背景デザイン</p>
</section>
HTML

LP のファーストビューなどでよく見る「ふわっと光る背景」は、
ほぼこのパターンです。

radial-gradient を使うときの設計ポイント（ここが一番大事）

中心位置を意識する

at center だけでなく、
at top left や at 20% 80% などで
「どこから光らせたいか」をコントロールできます。

透明色（transparent / rgba）を必ず使う

radial-gradient は「にじませる」のが本領なので、
transparent や rgba(..., 0.x) を混ぜると一気にプロっぽくなります。

単体より“重ねる”と一気に表現力が上がる

1つだけでも使えますが、
2〜3個重ねると「奥行き」「世界観」が出ます。

Tailwind では任意値で書く

bg-[radial-gradient(...)] でそのまま書けるので、
慣れてくると CSS より早くなります。

実務テンプレート：そのままコピペで使える radial-gradient セット

ヒーロー背景（Tailwind）

<section class="min-h-[60vh] flex items-center justify-center text-center
                bg-[radial-gradient(circle_at_20%_20%,rgba(59,130,246,0.35),transparent_60%),radial-gradient(circle_at_80%_60%,rgba(236,72,153,0.35),transparent_60%),#020617] text-white px-6">
  <div>
    <h1 class="text-4xl md:text-5xl font-bold mb-4">Radial Hero</h1>
    <p class="text-lg text-gray-200 mb-6">ふわっと光る背景で世界観を作る</p>
    <button class="px-6 py-3 rounded-full text-white
                   bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.6),transparent_60%),linear-gradient(to_right,#3b82f6,#1d4ed8)]">
      はじめる
    </button>
  </div>
</section>
HTML

まとめ

radial-gradient は
「光」「にじみ」「スポット」「丸いアクセント」 を作るための背景テクニックです。

押さえておきたいポイントは：

  • circle / ellipse と中心位置（at …）を意識する
  • transparent や rgba で“にじませる”
  • 複数の radial-gradient を重ねると一気に世界観が出る
  • Tailwind では bg-[radial-gradient(…)] で自由に書ける

スポンサーリンク
タイトルとURLをコピーしました