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

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

コード

上記サンプルのコードです。
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関数

サンプル

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>

関連の記事

CSS 背景色を指定するサンプル(background-color)
CSS 背景画像を指定するサンプル(background-image)
CSS 背景画像の繰り返し方法を指定するサンプル(background-repeat)
CSS3 枠線の角を丸くするサンプル(border-radius)
CSS3 ボックスに影をつけるサンプル(box-shadow)
CSS3 文字に影をつけるサンプル(text-shadow)
CSS3 透明度を指定するサンプル(opacity)
CSS3 線のグラデーションのサンプル(linear-gradient)

プログラムでつまったらteratailに登録して質問しましょう!↓↓↓

△上に戻る