radial-gradient() : 円形グラデーション - CSSの設定値 - Web開発

概要へ移動

このページで解説するコードの実行結果。

実行結果

0
10

0
20

0
30

0
40

0
50

0
60

0
70

0
80

0
90

0
100

10
100

20
100

30
100

40
100

50
100

60
100

70
100

80
100

90
100

実行結果

0
100

10
90

20
80

30
70

40
60

50
50

40
50

30
50

20
50

10
50

0
50

実行結果

円

楕円

横に移動

-20%

-10%

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

110%

120%

縦に移動

-20%

-10%

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

110%

120%

楕円: closest-side

楕円: closest-corner

楕円: farthest-side

楕円: farthest-corner

円: closest-side

円: closest-corner

円: farthest-side

円: farthest-corner

色を重ねる

このページの説明は、以下のコードから始める。

CSS : デフォルトCSS


div {
  border:         1px solid gray; /* 境界線 */
  width:          200px;          /* 幅 */     
  height:         200px;          /* 高さ */     
  display:        inline-block;   /* 横並び */
  vertical-align: top;            /* 上揃え */
  margin:         3px;            /* 外側の余白 */
  background-color: white;        /* 背景色 */
}

HTML : 適用するHTML


<div class="sample"></div>

実行結果

`radial-gradient()`関数の概要

backgroundプロパティにradial-gradient()関数を設定すると、円形なグラデーションになる。

※ 注意: backgroundプロパティにしか設定できない。 background-colorプロパティにも、colorプロパティにも設定できない。

複数の色はカンマ「,」で指定する。

CSS : radial-gradient


.sample  {
    background-image:  radial-gradient( red, yellow );
}

実行結果

上図の中心がred、４つの角がyellowであり、その間をグラデーションしている。

さて、yellowの後ろに（カンマではなく）スペースでつなげて50%と書くと「内側の円をredとyellowで分け」、「外側の円はyellow」になる。

CSS : yellow 50%


.sample  {
    background-image:  radial-gradient( red, yellow 50% );
}

実行結果

25%にすると、さらに赤い円は縮まる。

CSS : yellow 25%


.sample  {
    background-image:  radial-gradient( red, yellow 25% );
}

実行結果

次に、red 50%とする。（yellowには無指定）

この場合、赤い円は大きくなる。

CSS : red 50%


.sample  {
    background-image:  radial-gradient( red 50%, yellow );
}

境目は上から３／４

red 75%とすると、さらに大きく。

CSS : red 75%


.sample  {
    background-image:  radial-gradient( red 75%, yellow );
}

境目は上から７／８

最後に両方指定した場合。

red 40%, yellow 60%とする。

内側から「0 ～ 40%」のところはredのみ、「60% ～ 100%」のところはyellowのみとなる。

残った「40% ～ 60%」の領域のみがグラデーションになる。

CSS : red 40%, yellow 60%


.sample  {
    background-image:  radial-gradient( red 40%, yellow 60% );
}

両方指定

下はred, yellowのみの指定。上の結果の方が滲(にじ)んでいる領域が少ない。

CSS : radial-gradient


.sample  {
    background-image:  radial-gradient( red, yellow );
}

実行結果

まとめる。sample-0-100クラスが無指定（デフォルト）の状態。

CSS : まとめ


.sample-0-10    { background-image:  radial-gradient( red    , yellow 10% ); }
.sample-0-20    { background-image:  radial-gradient( red    , yellow 20% ); }
.sample-0-30    { background-image:  radial-gradient( red    , yellow 30% ); }
.sample-0-40    { background-image:  radial-gradient( red    , yellow 40% ); }
.sample-0-50    { background-image:  radial-gradient( red    , yellow 50% ); }
.sample-0-60    { background-image:  radial-gradient( red    , yellow 60% ); }
.sample-0-70    { background-image:  radial-gradient( red    , yellow 70% ); }
.sample-0-80    { background-image:  radial-gradient( red    , yellow 80% ); }
.sample-0-90    { background-image:  radial-gradient( red    , yellow 90% ); }
.sample-0-100   { background-image:  radial-gradient( red    , yellow ); }
.sample-10-100  { background-image:  radial-gradient( red 10%, yellow ); }
.sample-20-100  { background-image:  radial-gradient( red 20%, yellow ); }
.sample-30-100  { background-image:  radial-gradient( red 30%, yellow ); }
.sample-40-100  { background-image:  radial-gradient( red 40%, yellow ); }
.sample-50-100  { background-image:  radial-gradient( red 50%, yellow ); }
.sample-60-100  { background-image:  radial-gradient( red 60%, yellow ); }
.sample-70-100  { background-image:  radial-gradient( red 70%, yellow ); }
.sample-80-100  { background-image:  radial-gradient( red 80%, yellow ); }
.sample-90-100  { background-image:  radial-gradient( red 90%, yellow ); }

div {
    width:              5em;           /*  幅 */   
    height:             5em;           /*  高さ */   
}

HTML : 適用するHTML


<div class="sample-0-10"> 0  <br> 10 </div>
<div class="sample-0-20"> 0  <br> 20 </div>
<div class="sample-0-30"> 0  <br> 30 </div>
<div class="sample-0-40"> 0  <br> 40 </div>
<div class="sample-0-50"> 0  <br> 50 </div>
<div class="sample-0-60"> 0  <br> 60 </div>
<div class="sample-0-70"> 0  <br> 70 </div>
<div class="sample-0-80"> 0  <br> 80 </div>
<div class="sample-0-90"> 0  <br> 90 </div>
<div class="sample-0-100">  0  <br> 100 </div>
<div class="sample-10-100"> 10 <br> 100 </div>
<div class="sample-20-100"> 20 <br> 100 </div>
<div class="sample-30-100"> 30 <br> 100 </div>
<div class="sample-40-100"> 40 <br> 100 </div>
<div class="sample-50-100"> 50 <br> 100 </div>
<div class="sample-60-100"> 60 <br> 100 </div>
<div class="sample-70-100"> 70 <br> 100 </div>
<div class="sample-80-100"> 80 <br> 100 </div>
<div class="sample-90-100"> 90 <br> 100 </div>

実行結果

0
10

0
20

0
30

0
40

0
50

0
60

0
70

0
80

0
90

0
100

10
100

20
100

30
100

40
100

50
100

60
100

70
100

80
100

90
100

その２。

CSS : まとめ２


.sample-0-100  { background-image:  radial-gradient( red    , yellow     ); }
.sample-10-90  { background-image:  radial-gradient( red 10%, yellow 90% ); }
.sample-20-80  { background-image:  radial-gradient( red 20%, yellow 80% ); }
.sample-30-70  { background-image:  radial-gradient( red 30%, yellow 70% ); }
.sample-40-60  { background-image:  radial-gradient( red 40%, yellow 60% ); }
.sample-50-50  { background-image:  radial-gradient( red 50%, yellow 50% ); }
.sample-40-50  { background-image:  radial-gradient( red 40%, yellow 50% ); }
.sample-30-50  { background-image:  radial-gradient( red 30%, yellow 50% ); }
.sample-20-50  { background-image:  radial-gradient( red 20%, yellow 50% ); }
.sample-10-50  { background-image:  radial-gradient( red 10%, yellow 50% ); }
.sample-0-50   { background-image:  radial-gradient( red    , yellow 50% ); }


div {
    width:              5em;           /*  幅 */   
    height:             5em;           /*  高さ */   
}

HTML : 適用するHTML


<div class="sample-0-100">  0   <br> 100</div>
<div class="sample-10-90">  10  <br> 90 </div>
<div class="sample-20-80">  20  <br> 80 </div>
<div class="sample-30-70">  30  <br> 70 </div>
<div class="sample-40-60">  40  <br> 60 </div>
<div class="sample-50-50">  50  <br> 50 </div>
<div class="sample-40-50">  40  <br> 50 </div>
<div class="sample-30-50">  30  <br> 50 </div>
<div class="sample-20-50">  20  <br> 50 </div>
<div class="sample-10-50">  10  <br> 50 </div>
<div class="sample-0-50">   0   <br> 50 </div>

実行結果

0
100

10
90

20
80

30
70

40
60

50
50

40
50

30
50

20
50

10
50

0
50

`repeating-radial-gradient()`関数

radial-gradient()の復習。

CSS : radial-gradient


.sample  {
    background-image:  radial-gradient( red, yellow );
}

実行結果

最後のyellowを50%にすると、外側５０％はyellowになる。

CSS : yellow 50%


.sample  {
    background-image:  radial-gradient( red, yellow 50% );
}

実行結果

radial-gradientをrepeating-radial-gradientに変更すると繰り返しになる。

50%を指定しているので、２回繰り返す。

CSS : repeating-radial-gradient


.sample  {
    background-image:  repeating-radial-gradient( red, yellow 50% );
}

実行結果

33%を指定すると３回繰り返す。

CSS : yellow 33%


.sample  {
    background-image:  repeating-radial-gradient( red, yellow 33% );
}

実行結果

25%を指定すると４回繰り返す。

CSS : yellow 25%


.sample  {
    background-image:  repeating-radial-gradient( red, yellow 25% );
}

実行結果

複数の色を指定

３色の色を指定する。それぞれ１／３に分ける。

CSS : ３色


.sample  {
    background-image:  radial-gradient( red, yellow, green );
}

実行結果

blueを加えて４色にする。それぞれ２５％に分けられる。

CSS : ４色


.sample  {
    background-image:  radial-gradient( red, yellow, green, blue );
}

実行結果

yellow 75%と指定する。「内側の７５％をredとyellowで半分に分け」、「残りの２５％をgreenとblueが分ける」ことになる。

CSS : yellow 75%


.sample  {
    background-image:  radial-gradient( red, yellow 75%, green, blue );
}

実行結果

加えてred 50%にする。内側の５０％がred、５０％～７５％がyellow、残りにgreenとblueになる。

CSS : red 50%


.sample  {
    background-image:  radial-gradient( red 50%, yellow 75%, green, blue );
}

実行結果

`repeating-radial-gradient`に複数指定

復習。 radial-gradientの３色指定。

CSS : ３色


.sample  {
    background-image:  radial-gradient( red, yellow, green );
}

実行結果

最後のgreenを50%にすると、外側５０％はgreenになる。

CSS : green 50%


.sample  {
    background-image:  radial-gradient( red, yellow, green 50% );
}

実行結果

radial-gradientをrepeating-radial-gradientに変更すると繰り返しになる。

CSS : repeating-radial-gradient


.sample  {
    background-image:  repeating-radial-gradient( red, yellow, green 50% );
}

実行結果

ちなみにrepeating-radial-gradientを使う場合、開始と終了の色を同じにすると見た目が良い。

最後のgreenをredに変更してみる。

CSS : repeating-radial-gradient


.sample  {
    background-image:  repeating-radial-gradient( red, yellow, red 50% );
}

実行結果

三回繰り返すには、33%にする。

CSS : repeating-radial-gradient


.sample  {
    background-image:  repeating-radial-gradient( red, yellow, red 33% );
}

目が回りそう

円／楕円(だえん)

さて、これまで縦（height）横（width）ともに200pxの正方形の中でradial-gradient()を使ってきたが、長方形にしたらどうなるのだろうか？

CSS : 長方形にする


.sample  {
    background-image:  radial-gradient( red 40%, yellow 60% );
}

div {
    height:   120px;  /*  高さ */   
}

楕円

楕円になる。

redの前に「circle, 」を記述すると円になる。

CSS : circle


.sample  {
    background-image:  radial-gradient( circle, red 40%, yellow 60% );
}

div {
    height:   120px;  /*  高さ */   
}

円

円のサイズを小さくすると、長方形内に収まる。

CSS : circle


.sample  {
    background-image:  radial-gradient( circle, red 20%, yellow 40% );
}

div {
    height:   120px;  /*  高さ */   
}

円を小さくする

なお、デフォルト値は「ellipse = 楕円」である。

CSS : ellipse


.sample  {
    background-image:  radial-gradient( ellipse, red 40%, yellow 60% );
}

div {
    height:   120px;  /*  高さ */   
}

ellipse ＝楕円

移動

横位置

位置をずらしてみる。まず、真ん中に小さい円を描く。

CSS : circle


.sample  {
    background-image:  radial-gradient( circle, red 10%, yellow 15% );
}

小さい円

「circle at 30px, 」と指定すると左に寄る。なお、円の大きさが変わっているが、今のところは無視する。

30pxは一番左端からの距離である。（横幅は200px）

CSS : 30px


.sample  {
    background-image:  radial-gradient( circle at 30px, red 10%, yellow 15% );
}

左寄り

横幅は200pxだから、中心は100px。120pxだと、やや右に寄る。

CSS : 150px


.sample  {
    background-image:  radial-gradient( circle at 120px, red 10%, yellow 15% );
}

右寄り

100pxだと中心。

CSS : 100px


.sample  {
    background-image:  radial-gradient( circle at 100px, red 10%, yellow 15% );
}

中心

中心はcenterと書くこともできる。（これがデフォルト値になっているので、無指定と同じ）

CSS : center


.sample  {
    background-image:  radial-gradient( circle at center, red 10%, yellow 15% );
}

中心

「%」で書くこともできる。（左端が0%、右端が100%）

CSS : 20%


.sample  {
    background-image:  radial-gradient( circle at 20%, red 10%, yellow 15% );
}

実行結果

なお、circleを省略すると、デフォルトのellipse（楕円）になる。

CSS : circleを省略


.sample  {
    background-image:  radial-gradient( at 20%, red 10%, yellow 15% );
}

実行結果

まとめ。（マイナス値も指定できる）

CSS : まとめ


.m20  { background-image:  radial-gradient( circle at -20%,red 10%, yellow 15% ); }
.m10  { background-image:  radial-gradient( circle at -10%,red 10%, yellow 15% ); }
.p0   { background-image:  radial-gradient( circle at 0,   red 10%, yellow 15% ); }
.p10  { background-image:  radial-gradient( circle at 10%, red 10%, yellow 15% ); }
.p20  { background-image:  radial-gradient( circle at 20%, red 10%, yellow 15% ); }
.p30  { background-image:  radial-gradient( circle at 30%, red 10%, yellow 15% ); }
.p40  { background-image:  radial-gradient( circle at 40%, red 10%, yellow 15% ); }
.p50  { background-image:  radial-gradient( circle at 50%, red 10%, yellow 15% ); }
.p60  { background-image:  radial-gradient( circle at 60%, red 10%, yellow 15% ); }
.p70  { background-image:  radial-gradient( circle at 70%, red 10%, yellow 15% ); }
.p80  { background-image:  radial-gradient( circle at 80%, red 10%, yellow 15% ); }
.p90  { background-image:  radial-gradient( circle at 90%, red 10%, yellow 15% ); }
.p100 { background-image:  radial-gradient( circle at 100%,red 10%, yellow 15% ); }
.p110 { background-image:  radial-gradient( circle at 110%,red 10%, yellow 15% ); }
.p120 { background-image:  radial-gradient( circle at 120%,red 10%, yellow 15% ); }

div { height: 50px; display: block; }

横に移動

-20%

-10%

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

110%

120%

縦位置

横位置の直後にスペースで続けて縦位置を指定できる。

40% 20%にすると、横位置は40%（やや左寄り）、縦位置は上から20%。

CSS : center 20%


.sample  {
    background-image:  radial-gradient( circle at 40% 20%, red 10%, yellow 15% );
}

上に

横位置とほぼ同じなので、説明は省略。

CSS : まとめ


.m20  { background-image:  radial-gradient( circle at center -20%,red 10%, yellow 15% ); }
.m10  { background-image:  radial-gradient( circle at center -10%,red 10%, yellow 15% ); }
.p0   { background-image:  radial-gradient( circle at center 0,   red 10%, yellow 15% ); }
.p10  { background-image:  radial-gradient( circle at center 10%, red 10%, yellow 15% ); }
.p20  { background-image:  radial-gradient( circle at center 20%, red 10%, yellow 15% ); }
.p30  { background-image:  radial-gradient( circle at center 30%, red 10%, yellow 15% ); }
.p40  { background-image:  radial-gradient( circle at center 40%, red 10%, yellow 15% ); }
.p50  { background-image:  radial-gradient( circle at center 50%, red 10%, yellow 15% ); }
.p60  { background-image:  radial-gradient( circle at center 60%, red 10%, yellow 15% ); }
.p70  { background-image:  radial-gradient( circle at center 70%, red 10%, yellow 15% ); }
.p80  { background-image:  radial-gradient( circle at center 80%, red 10%, yellow 15% ); }
.p90  { background-image:  radial-gradient( circle at center 90%, red 10%, yellow 15% ); }
.p100 { background-image:  radial-gradient( circle at center 100%,red 10%, yellow 15% ); }
.p110 { background-image:  radial-gradient( circle at center 110%,red 10%, yellow 15% ); }
.p120 { background-image:  radial-gradient( circle at center 120%,red 10%, yellow 15% ); }

div { width: 50px; }

縦に移動

-20%

-10%

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

110%

120%

内接(ないせつ)／外接(がいせつ)

数学で言うところの「内接」と「外接」である。

設定値	意味	デフォルト
`closest-side`	内接：近い辺に接する
`closest-corner`	近い角に接する
`farthest-side`	遠い辺に接する
`closest-corner`	外接：遠い角に接する	○

まず、無指定の場合（長方形の中心からずれた位置に「楕円」がある）

CSS : 無指定


.sample  {
    background-image:  repeating-radial-gradient(
        at 30% 30%, red, yellow );
}

div {   height:   120px;  /*  高さ */   }

外接：遠い角に接する(デフォルト)

CSS : closest-side


.sample  {
    background-image:  repeating-radial-gradient(
        closest-side at 30% 30%, red, yellow );
}

div {   height:   120px;  /*  高さ */   }

内接：近い辺に接する

CSS : closest-corner


.sample  {
    background-image:  repeating-radial-gradient(
        closest-corner at 30% 30%, red, yellow );
}

div {   height:   120px;  /*  高さ */   }

近い角に接する

CSS : farthest-side


.sample  {
    background-image:  repeating-radial-gradient(
        farthest-side at 30% 30%, red, yellow );
}

div {   height:   120px;  /*  高さ */   }

遠い辺に接する

CSS : farthest-corner


.sample  {
    background-image:  repeating-radial-gradient(
        farthest-corner at 30% 30%, red, yellow );
}

div {   height:   120px;  /*  高さ */   }

外接：遠い角に接する(デフォルト)

円の場合

無指定の場合（長方形の中心からずれた位置に「円」がある）

CSS : 無指定


.sample  {
    background-image:  repeating-radial-gradient(
        circle at 30% 30%, red, yellow );
}

div {   height:   120px;  /*  高さ */   }

一番遠い角に接する(デフォルト)

CSS : closest-side


.sample  {
    background-image:  repeating-radial-gradient(
        circle closest-side at 30% 30%, red, yellow );
}

div {   height:   120px;  /*  高さ */   }

一番近い辺に接する

CSS : closest-corner


.sample  {
    background-image:  repeating-radial-gradient(
        circle closest-corner at 30% 30%, red, yellow );
}

div {   height:   120px;  /*  高さ */   }

一番近い角に接する

CSS : farthest-side


.sample  {
    background-image:  repeating-radial-gradient(
        circle farthest-side at 30% 30%, red, yellow );
}

div {   height:   120px;  /*  高さ */   }

一番遠い辺に接する

CSS : farthest-corner


.sample  {
    background-image:  repeating-radial-gradient(
        circle farthest-corner at 30% 30%, red, yellow );
}

div {   height:   120px;  /*  高さ */   }

一番遠い角に接する(デフォルト)

移動すると大きさが変わる理由

縦や横に移動すると、円の大きさが変わった。

横に移動

-20%

-10%

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

110%

120%

縦に移動

-20%

-10%

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

110%

120%

この理由を説明する。

デフォルトではfarthest-corner、つまり、「一番遠い角までの距離＝ 100%」になる。

中心から離れると、「一番遠い角までの距離は大きく」なる。よって、相対的な100%の距離は大きくなる。

よって、「中心から離れる」→「円が大きく」なる。

色を混ぜる

詳しくは線形グラデーションを参照。

テキトーにやってみる。

CSS : farthest-corner


.sample  {
    background-image:   radial-gradient( circle at 20% 30%, transparent, red );
}

div  { width: 250px; }

実行結果

limeを加える。（カンマ「,」でつなぐ。）

CSS : farthest-corner


.sample  {
    background-image:   radial-gradient( circle at 120% 75%, lime, transparent 60% ),
                        radial-gradient( circle at 20% 30%, transparent, red );
}

div  { width: 250px; }

実行結果

moccasinを加える。

CSS : farthest-corner


.sample  {
    background-image:   radial-gradient( transparent 30%, moccasin ),
                        radial-gradient( circle at 120% 75%, lime, transparent 60% ),
                        radial-gradient( circle at 20% 30%, transparent, red );
}

div  { width: 250px; }

実行結果

イマイチやな。（そのうち芸術的なのに替えとく）

`radial-gradient()` : 円形グラデーション CSSの設定値

`radial-gradient()`関数の概要

`repeating-radial-gradient()`関数

複数の色を指定

`repeating-radial-gradient`に複数指定

円／楕円(だえん)

移動

横位置

縦位置

内接(ないせつ)／外接(がいせつ)

円の場合

移動すると大きさが変わる理由

色を混ぜる

リンク

radial-gradient()関数の概要

repeating-radial-gradient()関数

複数の色を指定

repeating-radial-gradientに複数指定

円／楕円(だえん)

移動

横位置

縦位置

内接(ないせつ)／外接(がいせつ)

円の場合

移動すると大きさが変わる理由

色を混ぜる

リンク

`radial-gradient()`関数の概要

`repeating-radial-gradient()`関数

`repeating-radial-gradient`に複数指定