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

Web APP CSS
スポンサーリンク

conic-gradient は「円を中心に色が回転する」ちょっとトリッキーなグラデーション

linear-gradient が「線」、radial-gradient が「円の広がり」だとしたら、
conic-gradient は “円グラフのように中心からぐるっと回るグラデーション” を作るためのものです。

色が角度に沿って変化するので、
円グラフ・進捗リング・カラーホイール・背景のアクセントなどに向いています。
少しクセはありますが、ハマると「他では出せない表現」ができます。

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

基本構文

background: conic-gradient(開始角度 at 位置, 色1, 色2, 色3, ...);
CSS

開始角度と位置は省略可能です。
何も書かないと「中心から、上方向（0deg）を起点に、時計回り」に色が変化します。

例：

background: conic-gradient(#f97316, #3b82f6, #22c55e, #f97316);
CSS

円の中心から、オレンジ→ブルー→グリーン→オレンジ…と一周します。

例1：一番シンプルなカラーホイール風グラデーション

CSS 版

.wheel {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(#f97316, #3b82f6, #22c55e, #f97316);
}
CSS

Tailwind 版

<div class="w-48 h-48 rounded-full bg-[conic-gradient(#f97316,#3b82f6,#22c55e,#f97316)]"></div>
HTML

色がぐるっと一周する「カラーホイール」のような見た目になります。
まずはここで「conic はこういう感じか」を掴むのが良いです。

例2：円グラフ風のセグメントを作る（% 指定がポイント）

CSS 版

.pie {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #3b82f6 0% 40%,
    #22c55e 40% 70%,
    #f97316 70% 100%
  );
}
CSS

Tailwind 版

<div class="w-48 h-48 rounded-full bg-[conic-gradient(#3b82f6_0%_40%,#22c55e_40%_70%,#f97316_70%_100%)]"></div>
HTML

0〜40%、40〜70%、70〜100% というように
「どの角度の範囲をどの色にするか」をパーセンテージで指定します。
これが円グラフ表現のキモです。

例3：進捗リング（プログレスサークル）を作る

CSS 版（進捗 65% の例）

.progress {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background:
    conic-gradient(#3b82f6 0% 65%, #e5e7eb 65% 100%);
  display: grid;
  place-items: center;
}

.progress-inner {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
CSS
<div class="progress">
  <div class="progress-inner">65%</div>
</div>
HTML

Tailwind 版

<div class="w-40 h-40 rounded-full bg-[conic-gradient(#3b82f6_0%_65%,#e5e7eb_65%_100%)] grid place-items-center">
  <div class="w-28 h-28 rounded-full bg-white flex items-center justify-center font-semibold">
    65%
  </div>
</div>
HTML

外側の円を conic-gradient で塗り分け、
内側に白い円を重ねて「リング」に見せています。
ダッシュボードや統計 UI でかなり使えるパターンです。

例4：開始角度と位置を変えて“光の方向”をコントロール

CSS 版

.light {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg at 50% 20%,
    rgba(255,255,255,0.9),
    rgba(59,130,246,0.2),
    rgba(15,23,42,1)
  );
}
CSS

Tailwind 版

<div class="w-56 h-56 rounded-full bg-[conic-gradient(from_180deg_at_50%_20%,rgba(255,255,255,0.9),rgba(59,130,246,0.2),rgba(15,23,42,1))]"></div>
HTML

from 180deg が「どの角度からスタートするか」、
at 50% 20% が「中心位置（X, Y）」です。
これで「どこから光が回り込んでいるか」を演出できます。

例5：背景のアクセントとして“ぐるっと回る色”を足す

CSS 版

.hero {
  background:
    conic-gradient(from 220deg at 10% 10%, rgba(59,130,246,0.4), transparent 40%),
    conic-gradient(from 40deg at 90% 80%, rgba(236,72,153,0.4), transparent 50%),
    #020617;
  color: white;
  padding: 4rem 2rem;
}
CSS

Tailwind 版

<section class="bg-[conic-gradient(from_220deg_at_10%_10%,rgba(59,130,246,0.4),transparent_40%),conic-gradient(from_40deg_at_90%_80%,rgba(236,72,153,0.4),transparent_50%),#020617] text-white py-16 px-6">
  <h1 class="text-4xl font-bold mb-4">Conic Hero</h1>
  <p class="text-lg text-gray-200">ぐるっと回る色で世界観を作る</p>
</section>
HTML

radial-gradient と同じく、
複数の conic-gradient を重ねると「抽象的な光の模様」が作れます。
LP のヒーローセクションやポートフォリオ背景にかなり相性が良いです。

例6：ボタンに“ぐるっと縁取り”のアニメーションを仕込む

アニメーションは CSS 側の話ですが、
conic-gradient と相性が良いのでイメージだけ。

CSS 版（イメージ）

.button-border {
  position: relative;
  padding: 0.15rem;
  border-radius: 9999px;
  background: conic-gradient(#3b82f6, #ec4899, #22c55e, #3b82f6);
}

.button-border-inner {
  padding: 0.6rem 1.5rem;
  border-radius: 9999px;
  background: #020617;
  color: white;
}
CSS

Tailwind 版

<div class="inline-block p-[2px] rounded-full bg-[conic-gradient(#3b82f6,#ec4899,#22c55e,#3b82f6)]">
  <button class="px-6 py-2 rounded-full bg-slate-950 text-white">
    Conic ボタン
  </button>
</div>
HTML

外側だけ conic-gradient にして、
内側は単色にすることで「ぐるっと色が回る縁取り」が作れます。
ここに animation を足すと、境界線が回転しているような表現も可能です。

conic-gradient を使うときの重要ポイント（ここを押さえると一気に楽になる）

角度とパーセンテージの感覚を掴む

0%〜100% は「0〜360度」に対応しています。
円グラフや進捗リングを作るときは、
「何％までをどの色にするか」を意識して書くと理解しやすいです。

中心位置（at …）で“どこから回すか”を決める

at center なら真ん中、
at 20% 80% なら左下寄り、
これだけで印象がガラッと変わります。

transparent や rgba を混ぜると一気にプロっぽくなる

不透明な色だけだと「ベタッ」としがちなので、
transparent や rgba(..., 0.x) を混ぜて“にじみ”を作ると良い感じになります。

Tailwind では任意値で書くのが基本

bg-[conic-gradient(...)] でそのまま書けるので、
慣れてくると CSS よりも素早く試行錯誤できます。

実務テンプレート：そのまま使える conic-gradient UI セット

進捗リング（Tailwind）

<div class="w-40 h-40 rounded-full bg-[conic-gradient(#22c55e_0%_72%,#e5e7eb_72%_100%)] grid place-items-center">
  <div class="w-28 h-28 rounded-full bg-white flex items-center justify-center font-semibold text-gray-800">
    72%
  </div>
</div>
HTML

カラーホイール背景のロゴエリア（Tailwind）

<div class="inline-flex items-center justify-center w-32 h-32 rounded-full bg-[conic-gradient(#3b82f6,#8b5cf6,#ec4899,#3b82f6)] text-white font-bold text-xl">
  LOGO
</div>
HTML

まとめ

conic-gradient は
「円グラフ」「進捗リング」「ぐるっと回る光」「抽象的な背景」 を作るための、少しマニアックだけど強力なグラデーションです。

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

  • 色の範囲を % で指定すると円グラフ・進捗表現が作れる
  • from と at で開始角度と中心位置をコントロールできる
  • transparent / rgba を混ぜると一気に表現力が上がる
  • Tailwind では bg-[conic-gradient(...)] でそのまま書ける

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