CSS radial-gradient 円のグラデーションのサンプル

説明	radial-gradient
サンプル	circle(円)を使用(2色)
	circle(円)を使用(3色)
	ellipse(楕円)を使用
	closest-corner(円の中心から最も近い角)
	farthest-corner(円の中心からも最も遠い角)
	circle(円)で色の停止の位置を追加
	グラデーションを繰り返す(repeating-radial-gradient)

radial-gradient

radial-gradientは、円のグラデーションを表示します。

radial-gradient (形状サイズ円の中心の位置,最初の色位置,途中の色位置,終了の色位置)

形状から円の中心の位置までは半角スペースで区切ります。

値は以下を設定します。

形状	circle(円)またはellipse(楕円)を指定します。デフォルトはellipse(楕円)。
サイズ	以下のいずれかを指定します。１．キーワードを指定２．数値+単位または数値+%を指定(数値+%は、ellipseのみ) 省略した場合は、farthest-cornerになります。
	１．キーワードの場合以下のいずれかを指定します。 closest-side・・・円の中心から最も近い縦と横の辺に接する closest-corner・・・円の中心から最も近い角に接する farthest-side・・・円の中心から最も遠い縦と横の辺に接する farthest-corner・・・円の中心からも最も遠い角に接する
	２．数値+単位または数値+%を指定 circleの場合、数値+単位で１つ指定します。→半径になります。例： 30px ellipseの場合、数値+単位または数値+%で2つ指定します。→最初が水平の値で次が垂直の値になります。例：30px 70px
円の中心の位置	以下のいずれかを指定します。１．キーワードを指定２．at 数値+単位　数値+単位を指定３．at 数値+%　数値+%を指定省略した場合は、centerになります。
	１．以下のキーワードを指定します。 at top・・・上の辺の真ん中に中心がきます。 at right・・・右辺の真ん中に中心がきます。 at bottom・・・下の辺の真ん中に中心がきます。 at left・・・左辺の真ん中に中心がきます。 at center・・・中央に中心がきます。 at top right・・・右上の角に中心がきます。 at bottom right・・・右下の角に中心がきます。 at bottom left・・・左下の角に中心がきます。 at top left・・・左上の角に中心がきます。
	２．at 数値+単位数値+単位を指定します。最初の値は水平の位置で、次の値は垂直の位置になります。 (例：at 10px 10px)
	３．at 数値+% 数値+%を指定します。 %は領域の幅と高さでの割合になります。最初の値は水平の位置で、次の値は垂直の位置になります。 (例：at 10% 10%)
最初の色位置	位置は省略可能。数値%
途中の色位置	途中の色は、複数指定可能。途中の色自体の省略も可能。位置は省略可能。数値%
終了の色位置	位置は省略可能。数値%

circle(円)を使用(2色)

offset-x

<style>
  .test1 {
    background: radial-gradient(circle, DeepPink, Gold);
    width: 300px;
    height: 50px;
  }
</style>
<div class="test1">offset-x</div>

circle(円)を使用(3色)

offset-x

<style>
  .test1 {
    background: radial-gradient(circle, DeepPink, Gold, Aqua);
    width: 300px;
    height: 50px;
  }
</style>
<div class="test1">offset-x</div>

ellipse(楕円)を使用

offset-x

<style>
  .test1 {
    background: radial-gradient(ellipse, DeepPink, Gold);
    width: 300px;
    height: 50px;
  }
</style>
<div class="test1">offset-x</div>

closest-corner(円の中心から最も近い角)

offset-x

<style>
  .test1 {
    background: radial-gradient(closest-corner at 20px 20px, DeepPink, Gold);
    width: 300px;
    height: 50px;
  }
</style>
<div class="test1">offset-x</div>

farthest-corner(円の中心からも最も遠い角)

offset-x

<style>
  .test1 {
    background: radial-gradient(farthest-corner at 20px 20px, DeepPink, Gold);
    width: 300px;
    height: 50px;
  }
</style>
<div class="test1">offset-x</div>

circle(円)で色の停止の位置を追加

offset-x

<style>
  .test1 {
    background: radial-gradient(circle, DeepPink 5%, Gold 10%, Aqua 80%);
    width: 300px;
    height: 50px;
  }
</style>
<div class="test1">offset-x</div>

赤と黄の領域が狭くなっています。

グラデーションを繰り返す(repeating-radial-gradient)

offset-x

<style>
  .test1 {
    background: repeating-radial-gradient(circle, DeepPink 5%, Gold 10%, Aqua 15%);
    width: 300px;
    height: 50px;
  }
</style>
<div class="test1">offset-x</div>

repeating-radial-gradientを使用します。