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

CSSのradial-gradient関数で、円をグラデーションするサンプルです。

確認環境
・Google Chrome

目次

仕様 radial-gradient関数の仕様
サンプル radial-gradientのサンプル
  円のグラデーション+色の停止の位置を追加するサンプル
仕様 repeating-radial-gradient関数の仕様
サンプル repeating-radial-gradientのサンプル

radial-gradient関数の仕様

radial-gradient (値1-1 値1-2 値1-3,値2,値3,値4)

radial-gradient 関数です。

引数は、6つあります。

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

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

コード

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

<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は、形状を楕円に指定しています。
test3からtest6は、サイズの指定をそれぞれ、closest-side、farthest-side、closest-corner、farthest-cornerに指定しています。

円のグラデーション+色の停止の位置を追加するサンプル

円のグラデーション+色の停止の位置を追加するサンプルです。

test1
circle
test2
circle

コード

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

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

3,6行目は、3つめの引数の%で停止の位置を指定しています。
色と停止の位置の間は半角スペースで区切ります。

repeating-radial-gradient関数の仕様

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 border-radius 四角の角を丸くするサンプル
CSS box-shadow ボックスに影をつけるサンプル
CSS text-shadow 文字に影をつけるサンプル
CSS opacity 透明度を指定するサンプル
CSS linear-gradient 線のグラデーションのサンプル

△上に戻る