CreaTools LogoCreaTools
Tech Notes
Gradient Maker

radial-gradientの中心位置と形状｜at・circle・ellipseを30秒で理解

2025-11-01

:::note ※radial-gradientの座標で詰まったときの「図解用」記事です :::

結論（30秒で分かる要点）

  • 中心位置：at の後に座標を指定（at 50% 50% = 中央）
  • 形状の選び方：正方形に近い要素は circle、横長なら ellipse
  • 迷ったら：Gradient Maker のRadialモードで視覚的に調整

💡 座標で悩むより先に → Gradient Maker で中心位置をクリック調整

よくある失敗（実務で踏む地雷）

❌ 失敗1：% と px を混在させて意図しない位置になる

/* ❌ 意図が不明確 */
radial-gradient(circle at 50px 50%, #667eea, #764ba2)

/* ✅ 単位を揃える */
radial-gradient(circle at 50% 50%, #667eea, #764ba2)
radial-gradient(circle at 100px 100px, #667eea, #764ba2)

% はレスポンシブ、px は固定位置。混在は保守性を下げる。

❌ 失敗2：横長要素に circle を指定して余白が発生

/* ❌ 横長ヒーローセクションに正円 → 左右に余白 */
.hero {
  width: 100%;
  height: 300px;
  background: radial-gradient(circle, #667eea, #764ba2);
}

/* ✅ 横長なら ellipse で要素に合わせる */
.hero {
  background: radial-gradient(ellipse, #667eea, #764ba2);
}

❌ 失敗3：サイズキーワードを知らずにはみ出す

/* ❌ デフォルトの farthest-corner で要素外まで広がる */
radial-gradient(circle at 10% 10%, #667eea, transparent)

/* ✅ closest-side で要素内に収める */
radial-gradient(circle closest-side at 10% 10%, #667eea, transparent)

基本構文

radial-gradient(形状 サイズ at 位置, 色1, 色2, ...)

省略時のデフォルト：ellipse farthest-corner at center

形状：circle vs ellipse

形状特徴適した場面
circle常に正円ボタン、アイコン、正方形要素
ellipse要素の縦横比に追従ヒーロー、カード、横長要素
/* 正円：縦横比に関係なく丸い */
radial-gradient(circle, #667eea, #764ba2)

/* 楕円：要素に合わせて変形 */
radial-gradient(ellipse, #667eea, #764ba2)

中心位置：at キーワード

/* キーワード指定 */
radial-gradient(circle at center, ...)      /* 中央（デフォルト） */
radial-gradient(circle at top left, ...)    /* 左上 */
radial-gradient(circle at bottom right, ...) /* 右下 */

/* パーセント指定 */
radial-gradient(circle at 50% 50%, ...)     /* 中央 */
radial-gradient(circle at 0% 0%, ...)       /* 左上 */
radial-gradient(circle at 30% 70%, ...)     /* 任意の位置 */

/* ピクセル指定 */
radial-gradient(circle at 100px 50px, ...)  /* 固定位置 */

座標の覚え方

位置X（横）Y（縦）
左上0%0%
中央50%50%
右下100%100%

サイズ指定

値意味用途
closest-side最も近い辺に接する要素内に収めたい
farthest-side最も遠い辺に接する少しはみ出しOK
closest-corner最も近い角に接するコンパクトな光
farthest-corner最も遠い角まで広がる（デフォルト）全体を覆う
/* 要素内に収まるグラデーション */
radial-gradient(circle closest-side at center, #667eea, #764ba2)

/* 要素全体を覆うグラデーション */
radial-gradient(circle farthest-corner at center, #667eea, #764ba2)

具体的なサイズ指定

/* 半径100pxの円 */
radial-gradient(circle 100px at center, #667eea, #764ba2)

/* 幅200px、高さ100pxの楕円 */
radial-gradient(ellipse 200px 100px at center, #667eea, #764ba2)

具体例：このUIならこの設定

ケース1：スポットライト効果（左上から光）

.spotlight {
  background: radial-gradient(
    ellipse farthest-corner at 20% 20%,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 50%
  ), #667eea;
}

→ Generatorで試す

ケース2：ボタンの光沢（上部に光）

.button {
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 60%
  ), linear-gradient(180deg, #667eea, #764ba2);
}

ケース3：中央から広がるフォーカス効果

.focus {
  background: radial-gradient(
    circle at center,
    #667eea 0%,
    #764ba2 50%,
    #1a1a2e 100%
  );
}

ブラウザ対応

ブラウザ対応状況備考
Chrome✅全機能対応
Safari✅全機能対応
Firefox✅全機能対応
Edge✅全機能対応

radial-gradient は2025年現在、全モダンブラウザで問題なく動作する。

まとめ：判断基準

条件推奨アプローチ
位置が分からないGradient Maker でクリック調整
正方形に近い要素circle
横長・縦長の要素ellipse
要素内に収めたいclosest-side
全体を覆いたいfarthest-corner（デフォルト）

この記事で解決しない場合