円形・放射状のグラデーションを指定する

radial-gradient()関数を利用すると、１点から放射状に広がる円形のグラデーションを表示できます。この関数は、画像を扱えるプロパティの値として指定します。

画像を扱えるプロパティすべてに指定できることに仕様上なってますが、Firefoxとか古いブラウザだと、background-image,backgroundプロパティにのみ適用されている点を頭の片隅に入れた方がいいです。

radial-gradient()関数の引数

●形状
グラデーションの形状を以下のキーワードで指定する。形状を省き、数値による指定が１つでもあれば、「circle」「ellipse」が指定されたものとして扱われます。

キーワード	意味
circle	円
ellipse	楕円

●サイズ
グラデーションを描く円または楕円のサイズを、キーワードか長さで指定する。
キーワードの場合は以下から。

キーワード	意味
closest-side	グラデーションの形状が「circle」のときは、円の中心から最も近いボックスの辺に、「ellipse」のときは楕円の中心から最も近い縦と横の辺に内接します。
farthest-side	グラデーションの形状が「circle」のときは、円の中心から最も遠いボックスの辺に、「ellipse」のときは楕円の中心から最も遠い縦と横の辺に内接します。
closest-corner	円または、楕円の中心から最も近いボックスの核に内接する。
farthest-corner	初期値です。円または、楕円の中心から最も遠いボックスの核に内接する。

●開始点
グラデーションの開始点となる円の中心の位置を、
「at 水平方向の位置垂直方向の位置」のかたちで半角スペースで区切って指定します。この水平／垂直方向の位置は、background-positionプロパティと同じように使い、「実数値+単位」「%値」「top,bottom,center,left,right」のキーワードの組合せで指定する。開始点を省略したときは「center」で指定したものとして扱われます。

●カラーストップ
色の値と位置を、半角スペースで区切って指定する。これは線形グラデーションと同じ方法です。

サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>円や楕円のグラデーション</title>
	<style>
	div{
		width:200px;
		height:120px;
	}
	/*
		長さを使うとき、グラデーションの形状が「circle」であれば、
		円の半径を「実数値＋単位」で１つだけ指定します。
		下記のように書くと半径60pxの円形グラデーションが表現できます。
	*/
	.graCir1{
		background:radial-gradient(circle 60px at center,gold,silver);
	}
	/*
		グラデーションの形状が「ellipse」なら、
		水平方向と垂直方向の半径をそれぞれ「実数値+単位」か「%値」で、
		半角スペースで区切って指定する。

		以下のように書くと、水平方向120px、垂直方向60pxの楕円の
		グラデーションとなります。サイズを省略すると、
		初期値の「farthest-corner」を指定されたものとして扱われます。
		形状とサイズは、どちらから先に書いてても大丈夫です。
	*/
	.graEll1{
		background:radial-gradient(ellipse 120px 60px at center,gold,silver);
	}

	/*
		iOS6,android4.3以前は-webkit-を付けること
		書き方も少し異なります。
	*/
	.graCir2{
		background:-webkit-radial-gradient(120px 80px, 30px 30px,blue,green);
		background:radial-gradient(circle 30px at 120px 80px,blue,green);
	}
	.graCir3{
		background:-webkit-radial-gradient(center,circle closest-side,green,orange 60%,pink);
		background:radial-gradient(circle closest-side at center,green,orange 60%,pink);
	}

	.graEll2{
		background:-webkit-radial-gradient(33% 66%,140px 70px,black,white);
		background:radial-gradient(ellipse 140px 70px at 33% 66%,black,white);
	}
	.graEll3{
		background:-webkit-radial-gradient(center,ellipse farthest-side,white,skyblue 50%,black);
		background:radial-gradient(ellipse farthest-side at center,white,skyblue 50%,black);
	}
	</style>
</head>
<body>
<div style="width:500px;">
	<div style="float:left;">
		<div class="graCir1">circle1</div>
		<div class="graCir2">circle2</div>
		<div class="graCir3">circle3</div>
	</div>
	<div style="float:right;">
		<div class="graEll1">ellipse1</div>
		<div class="graEll2">ellipse2</div>
		<div class="graEll3">ellipse3</div>
	</div>
</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>円や楕円のグラデーション</title>

<style>

div{

width:200px;

height:120px;

}

長さを使うとき、グラデーションの形状が「circle」であれば、

円の半径を「実数値＋単位」で１つだけ指定します。

下記のように書くと半径60pxの円形グラデーションが表現できます。

.graCir1{

background:radial-gradient(circle 60px at center,gold,silver);

}

グラデーションの形状が「ellipse」なら、

水平方向と垂直方向の半径をそれぞれ「実数値+単位」か「%値」で、

半角スペースで区切って指定する。

以下のように書くと、水平方向120px、垂直方向60pxの楕円の

グラデーションとなります。サイズを省略すると、

初期値の「farthest-corner」を指定されたものとして扱われます。

形状とサイズは、どちらから先に書いてても大丈夫です。

.graEll1{

background:radial-gradient(ellipse 120px 60px at center,gold,silver);

}

iOS6,android4.3以前は-webkit-を付けること

書き方も少し異なります。

.graCir2{

background:-webkit-radial-gradient(120px 80px, 30px 30px,blue,green);

background:radial-gradient(circle 30px at 120px 80px,blue,green);

}

.graCir3{

background:-webkit-radial-gradient(center,circle closest-side,green,orange 60%,pink);

background:radial-gradient(circle closest-side at center,green,orange 60%,pink);

}

.graEll2{

background:-webkit-radial-gradient(33% 66%,140px 70px,black,white);

background:radial-gradient(ellipse 140px 70px at 33% 66%,black,white);

}

.graEll3{

background:-webkit-radial-gradient(center,ellipse farthest-side,white,skyblue 50%,black);

background:radial-gradient(ellipse farthest-side at center,white,skyblue 50%,black);

}

</style>

</head>

<body>

<div class="graCir1">circle1</div>

<div class="graCir2">circle2</div>

<div class="graCir3">circle3</div>

</div>

<div class="graEll1">ellipse1</div>

<div class="graEll2">ellipse2</div>

<div class="graEll3">ellipse3</div>

</div>

</body>

</html>