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

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

確認環境
・Google Chrome
・Windows 10

目次

円のグラデーションのサンプル

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

円のグラデーションのコード

上記サンプルのコードです。
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行目は、3つめの引数の%で停止の位置を指定しています。
色と停止の位置の間は半角スペースで区切ります。

<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>

radial-gradient 関数

radial-gradient 関数です。
引数は、6つあります。

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

1つめの引数の値1-1は、形状です。

値1-1(形状) circle(円)またはellipse(楕円)を指定します。
値1-1から1-3までは半角スペースで区切ります。

2つめの引数の値1-2は、サイズです。

値1-2 (サイズ) 以下のいずれかを指定します。
1.キーワードを指定
2.数値+単位または数値+%を指定(数値+%は、ellipseのみ)
省略した場合は、キーワードのfarthest-cornerになります。
1.キーワードの場合以下のいずれかを指定します。
closest-side・・・円の中心から最も近い縦と横の辺に接する
closest-corner・・・円の中心から最も近い角に接する
farthest-side・・・円の中心から最も遠い縦と横の辺に接する
farthest-corner・・・円の中心からも最も遠い角に接する
2.数値+単位または数値+%を指定
circleの場合、数値+単位で1つ指定します。→半径になります。例: 30px
ellipseの場合、数値+単位または数値+%で2つ指定します。→最初が水平の値で次が垂直の値になります。例:30px 70px

3つめの引数の値1-3は、円の中心の位置です。

値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%)

4つめの引数の値2は、最初の色と停止の位置です。

値2 (最初の色と停止の位置) 色と停止の位置(カラーストップ)を指定します。(半角スペースで区切る)
位置は、数値+単位または数値%で表します。
位置は省略可能です。

5つめの引数の値3は、途中の色と停止の位置です。

値3 (途中の色と停止の位置) 色と停止の位置(カラーストップ)を指定します。(半角スペースで区切る)
途中の色は、複数指定可能です。途中の色自体の省略も可能です。
位置は、数値+単位または数値%で表します。
位置は省略可能です。

6つめの引数の値4は、途中の色と停止の位置です。

値4 (終了の色と停止の位置) 色と停止の位置(カラーストップ)を指定します。(半角スペースで区切る)
位置は、数値+単位または数値%で表します。
位置は省略可能です。

円のグラデーションを繰り返して表示するサンプル

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>

repeating-radial-gradient関数

関連の記事

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

△上に戻る