CSS3 円のグラデーションのサンプル(radial-gradient)

CSS3の円のグラデーションのサンプルです。
radial-gradient関数を使用します。

サンプル
radial-gradient 関数
色の停止の位置を追加したサンプル
repeating-radial-gradient関数

サンプル

radial-gradient関数を使用したサンプルです。

test1
circle

test2
ellipse

test3
closest-side at 20px 20px

test4
farthest-side at 20px 20px

test5
closest-corner at 20px 20px

test6
farthest-corner at 20px 20px

radial-gradient 関数

プロパティ : radial-gradient ( 値1-1　値1-2　値1-3,　値2,　値3,　値4 )

値	説明
値1-1(形状)	circle(円)またはellipse(楕円)を指定します。値1-1から1-3までは半角スペースで区切ります。
値1-2 (サイズ)	以下のいずれかを指定します。１．キーワードを指定２．数値+単位または数値+%を指定(数値+%は、ellipseのみ) 省略した場合は、キーワードのfarthest-cornerになります。
	１．キーワードの場合以下のいずれかを指定します。 closest-side・・・円の中心から最も近い縦と横の辺に接する closest-corner・・・円の中心から最も近い角に接する farthest-side・・・円の中心から最も遠い縦と横の辺に接する farthest-corner・・・円の中心からも最も遠い角に接する
	２．数値+単位または数値+%を指定 circleの場合、数値+単位で１つ指定します。→半径になります。例： 30px ellipseの場合、数値+単位または数値+%で2つ指定します。→最初が水平の値で次が垂直の値になります。例：30px 70px
値1-3 (円の中心の位置)	以下のいずれかを指定します。１．キーワードを指定２．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%)
値2 (最初の色と停止の位置)	色と停止の位置(カラーストップ)を指定します。(半角スペースで区切る) 位置は、数値+単位または数値%で表します。位置は省略可能です。
値3 (途中の色と停止の位置)	色と停止の位置(カラーストップ)を指定します。(半角スペースで区切る) 途中の色は、複数指定可能です。途中の色自体の省略も可能です。位置は、数値+単位または数値%で表します。位置は省略可能です。
値4 (終了の色と停止の位置)	色と停止の位置(カラーストップ)を指定します。(半角スペースで区切る) 位置は、数値+単位または数値%で表します。位置は省略可能です。

CSSの関数です。
指定した色から色へ円状にグラデーションさせることができます。
以下はMDNの radial-gradient関数のリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/radial-gradient

コード

上記サンプルのコードです。
test1は、形状をcircleに指定しています。
test2は、形状を楕円に指定しています。
test3からtest6は、サイズの指定をそれぞれ、closest-side、farthest-side、closest-corner、farthest-cornerに指定しています。

<style>
#test1{
	background:radial-gradient(circle,DeepPink,Aqua,Gold);
}
#test2{
	background:radial-gradient(ellipse,DeepPink,Aqua,Gold);
}
#test3{
	background:radial-gradient(ellipse closest-side at 20px 20px,DeepPink,Aqua,Gold);
}
#test4{
	background:radial-gradient(ellipse farthest-side at 20px 20px,DeepPink,Aqua,Gold);
}
#test5{
	background:radial-gradient(ellipse closest-corner at 20px 20px,DeepPink,Aqua,Gold);
}
#test6{
	background:radial-gradient(ellipse farthest-corner at 20px 20px,DeepPink,Aqua,Gold);
}
.c1 div{width:300px;border: 1px solid #000;
margin-bottom:20px;height:50px;text-align:center;}
</style>
<body >
<div class="c1">
	<div id="test1">test1<br>circle</div>
	<div id="test2">test2<br>ellipse</div>
	<div id="test3">test3<br>closest-side at 10px 10px</div>
	<div id="test4">test4<br>farthest-side at 10px 10px</div>
	<div id="test5">test5<br>closest-corner at 10px 10px</div>
	<div id="test6">test6<br>farthest-corner at 10px 10px</div>
</div>
</body>

色の停止の位置を追加したサンプル

色の停止の位置を追加したサンプルです。

test1
circle

test2
circle

コード

上記サンプルのコードです。
3,6行目で停止の位置を指定しています。
色と停止の位置の間は半角スペースで区切ります。

<style>
#test10{
	background:radial-gradient(circle,DeepPink 10%,Aqua 20%,Gold 100%);
}
#test11{
	background:radial-gradient(circle,DeepPink 80%,Aqua 90%,Gold 100%);
}
.c2 div{width:300px;border: 1px solid #000;
margin-bottom:20px;height:150px;text-align:center;}
</style>
<body >
<div class="c2">
	<div id="test10">test1<br>circle</div>
	<div id="test11">test2<br>circle</div>
</div>
</body>

repeating-radial-gradient関数

グラデーションを繰り返して表示することができます。
引数は、上記のradial-gradient関数と同じです。
以下はMDNのrepeating-radial-gradient関数のリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/repeating-radial-gradient

サンプル

repeating-radial-gradient関数を使用したサンプルです。

test1
circle

test2
circle

コード

上記サンプルのコードです。

<style>
#test20{
background:repeating-radial-gradient(circle,DeepPink 2%,Aqua 5%,Gold 8%);
}
#test21{
background:repeating-radial-gradient(circle,DeepPink 20%,Aqua 50%,Gold 80%);
}
.c3 div{width:300px;border: 1px solid #000;
margin-bottom:20px;height:150px;text-align:center;}
</style>
<body >
<div class="c3">
	<div id="test20">test1<br>circle</div>
	<div id="test21">test2<br>circle</div>
</div>
</body>