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

radial-gradientのサンプルです。

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

radial-gradient

書き方 radial-gradient (形状 サイズ 円の中心の位置,最初の色 位置,途中の色 位置,終了の色 位置)
形状から円の中心の位置までは半角スペースで区切ります。
形状 circle(円)またはellipse(楕円)を指定します。デフォルトはellipse(楕円)。
サイズ 以下のいずれかを指定します。
1.キーワードを指定
2.数値+単位または数値+%を指定(数値+%は、ellipseのみ)
省略した場合は、farthest-cornerになります。
1.キーワードの場合以下のいずれかを指定します。
closest-side・・・円の中心から最も近い縦と横の辺に接する
closest-corner・・・円の中心から最も近い角に接する
farthest-side・・・円の中心から最も遠い縦と横の辺に接する
farthest-corner・・・円の中心からも最も遠い角に接する
2.数値+単位または数値+%を指定
circleの場合、数値+単位で1つ指定します。→半径になります。例: 30px
ellipseの場合、数値+単位または数値+%で2つ指定します。→最初が水平の値で次が垂直の値になります。例:30px 70px
円の中心の位置 以下のいずれかを指定します。
1.キーワードを指定
2.at 数値+単位 数値+単位を指定
3.at 数値+% 数値+%を指定
省略した場合は、centerになります。
1.以下のキーワードを指定します。
at top・・・上の辺の真ん中に中心がきます。
at right・・・右辺の真ん中に中心がきます。
at bottom・・・下の辺の真ん中に中心がきます。
at left・・・左辺の真ん中に中心がきます。
at center・・・中央に中心がきます。
at top right・・・右上の角に中心がきます。
at bottom right・・・右下の角に中心がきます。
at bottom left・・・左下の角に中心がきます。
at top left・・・左上の角に中心がきます。
2.at 数値+単位 数値+単位を指定します。
最初の値は水平の位置で、次の値は垂直の位置になります。
(例:at 10px 10px)
3.at 数値+% 数値+%を指定します。
%は領域の幅と高さでの割合になります。
最初の値は水平の位置で、次の値は垂直の位置になります。
(例:at 10% 10%)
最初の色 位置 位置は省略可能。数値%
途中の色 位置 途中の色は、複数指定可能。途中の色自体の省略も可能。
位置は省略可能。数値%
終了の色 位置 位置は省略可能。数値%
参考(MDN) https://developer.mozilla.org/ja/docs/Web/CSS/radial-gradient

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>

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

グラデーションを繰り返す

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を使用します。

関連の記事

CSS opacity 透明度を指定するサンプル
CSS linear-gradient 線のグラデーションのサンプル

△上に戻る