【CSS】conic-gradient 概要＋活用したリッチな表現例

Posted at 2025-12-20

conic-gradient とは？

円錐状にグラデーションを描画する関数です。

See the Pen conic-gradient by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.

conic-gradient （扇形グラデーション）は、円の中心を回るように、上から始まって時計回りに色が遷移します。

`conic-gradient`で指定できる情報

from ~~deg：グラデーションが始まる向き
- デフォルトは0deg（真上）
- 角度の指定には、turn（回転） rad（ラジアン）を使える
  - 1turn：1周（円を分割して考える時に楽）
  - 約6.28rad（2πrad）：1周

See the Pen conic-gradient-2 by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.

at ~~% ~~%：円の中心点を指定する
- デフォルトは50%,50%（真ん中）
- X座標、Y座標の順
- 位置の指定には、px left center なども使える

See the Pen conic-gradient-3 by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.

色の指定
- 色の開始・終了位置を角度で指定して、境界をはっきりさせることもできる

See the Pen conic-gradient-3 by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.

conic-gradient を活用する表現例

スポットライトのような表現

中心を端に寄せると、円ではなくスポットライトっぽくできます
オレンジ系の光

See the Pen conic-gradient-5 by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.

オレンジの光の指定は以下のようになっています

0°~4°：透明 → オレンジ（2°） → 透明
4°~10°：透明
10°~15°：オレンジ → 透明
15°~18°：透明
18°~20°：オレンジ → 透明

.spotlight::before {
/* ...その他の指定 */
/* オレンジ */
background: 
 conic-gradient(from 180deg at 50% 0%, 
     transparent 0deg, var(--ray-color-1) 2deg, transparent 4deg, 
     var(--ray-color-1) 10deg, transparent 15deg, 
     var(--ray-color-1) 18deg, transparent 20deg),
/* ...その他の指定 */     
}

青の光も同様に複数の conic-gradient をカンマ区切りで重ねることで、複数の光の筋を表現しています

映写機のカウントダウン風アニメーション

See the Pen conic-gradient-6 by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.

回転しているアニメーション部分は以下のように書いています

conic-gradient(rgba(0,0,0,0.4) var(--angle), transparent var(--angle)
- 0度の位置から、--angleの位置まで半透明の黒で塗る
- --angleの位置から残りの部分まで透明にする
animation: scan 1s linear infinite;
- scan：アニメーション名、@keyframes scanを呼び出している
- 1s：アニメーションの時間、影が1周する時間
- linear：常に一定のスピードで動く
  - デフォルトだと ease（最初はゆっくり、途中速く）になって、カウントダウンのタイミングがズレるので指定している
- infinite：無限に繰り返す
@keyframes scan
- --angleを0deg〜360degに変えるアニメーションを定義している

/* angleの定義 */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}


/* conic-gradientを使った回転する影 */
.scanner {
  position: absolute;
  width: 500px; 
  height: 500px;
  /* --angleをアニメーションさせる */
  background: conic-gradient(
    rgba(0,0,0,0.4) var(--angle), 
    transparent var(--angle)
  );
  animation: scan 1s linear infinite;
}

/* 回転アニメーション */
@keyframes scan {
  from { --angle: 0deg; }
  to { --angle: 360deg; }
}