Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

radial-gradient()

背景に円形のグラデーションを指定できます。使用するときは『background』の値に『radial-gradient』を指定して下さい。

ブラウザのバージョンによっては、ベンダープレフィックス『webkit』、『moz』、『ms』等を付けないとグラデーションが効かない場合があるので、使用する際はベンダープレフィックスを付けるようにした方が無難です。

線形のグラデーションを指定したい場合は、『radial-gradient』ではなく『linear-gradient』を使用してください。

サンプルコード
background: radial-gradient(#FFFFFF, #C9C9C9);
background: -webkit-radial-gradient(#FFFFFF, #C9C9C9);
background: -moz-radial-gradient(#FFFFFF, #C9C9C9);
background: -ms-radial-gradient(#FFFFFF, #C9C9C9);

ベンダープレフィックスが必要なバージョンは下記を参考にしてください。

ブラウザベンダープレフィックスが必要なバージョン
ChromeChrome 25以下
SafariSafari 6以下
FirefoxFirefox 16以下
AndroidAndroid 5.0以下
iOSiOS 6.1以下
ブラウザでの表示結果
background: radial-gradient(#FFFFFF, #FF0000);
background: -webkit-radial-gradient(#FFFFFF, #FF0000);
background: -moz-radial-gradient(#FFFFFF, #FF0000);
background: -ms-radial-gradient(#FFFFFF, #FF0000);

対応ブラウザ
IE6 IE7 IE8 IE9 IE10 IE11 Safari Chrome Firefox Opera

iPhone Safari Android2系 標準ブラウザ Android4系 標準ブラウザ

※Androidはバージョン5.0からベンダープレフィックスが無くても使用することができますが、バージョン4系以下のブラウザではベンダープレフィックスが必要になります。

概要

背景に円形グラデーションを指定できます。記述方法は
『radial-gradient(『開始位置』 『角度』, 『形状』 『サイズ』, 『開始色』, 『途中色』, 『終了色』;)』
になります。『開始位置』、『角度』、『形状』、『サイズ』、『途中色』、は省略する事ができますが、省略した場合の開始位置は『center』、角度は『0deg』、形状は『ellipse』、サイズは『cover』と指定されているものとされ『途中色』は指定されていないものと扱われます。

形状とサイズの指定できる値は下記になります。

『形状』の指定可能な値
概要
ellipse楕円(初期値)
circle正円
div.hoge1 {
	background: radial-gradient(ellipse, #FFFFFF, #FF0000);
	background: -webkit-radial-gradient(ellipse, #FFFFFF, #FF0000);
	background: -moz-radial-gradient(ellipse, #FFFFFF, #FF0000);
	background: -ms-radial-gradient(ellipse, #FFFFFF, #FF0000);
	height: 200px;
	margin: 10px;
}

div.hoge2 {
	background: radial-gradient(circle, #FFFFFF, #FF0000);
	background: -webkit-radial-gradient(circle, #FFFFFF, #FF0000);
	background: -moz-radial-gradient(circle, #FFFFFF, #FF0000);
	background: -ms-radial-gradient(circle, #FFFFFF, #FF0000);
	height: 200px;
	margin: 10px;
}

『サイズ』の指定可能な値
概要
farthest-corner外周が要素の中心から最も遠い角に接するサイズになります。これが初期値になります。
farthest-side外周が要素の中心から最も遠い辺に内接するサイズになります。
closest-corner外周が要素の中心から最も近い角に接するサイズになります。
closest-side外周が要素の中心から最も近い辺に内接するサイズになります。
div.hoge1 {
	background: radial-gradient(farthest-corner, #FFFFFF, #FF0000);
	background: -webkit-radial-gradient(farthest-corner, #FFFFFF, #FF0000);
	background: -moz-radial-gradient(farthest-corner, #FFFFFF, #FF0000);
	background: -ms-radial-gradient(farthest-corner, #FFFFFF, #FF0000);
	height: 200px;
	margin: 10px;
}

div.hoge2 {
	background: radial-gradient(farthest-side, #FFFFFF, #FF0000);
	background: -webkit-radial-gradient(farthest-side, #FFFFFF, #FF0000);
	background: -moz-radial-gradient(farthest-side, #FFFFFF, #FF0000);
	background: -ms-radial-gradient(farthest-side, #FFFFFF, #FF0000);
	height: 200px;
	margin: 10px;
}

div.hoge3 {
	background: radial-gradient(closest-corner, #FFFFFF, #FF0000);
	background: -webkit-radial-gradient(closest-corner, #FFFFFF, #FF0000);
	background: -moz-radial-gradient(closest-corner, #FFFFFF, #FF0000);
	background: -ms-radial-gradient(closest-corner, #FFFFFF, #FF0000);
	height: 200px;
	margin: 10px;
}

div.hoge4 {
	background: radial-gradient(closest-side, #FFFFFF, #FF0000);
	background: -webkit-radial-gradient(closest-side, #FFFFFF, #FF0000);
	background: -moz-radial-gradient(closest-side, #FFFFFF, #FF0000);
	background: -ms-radial-gradient(closest-side, #FFFFFF, #FF0000);
	height: 200px;
	margin: 10px;
}

『開始位置』指定の記述は『top』、『left』、『right』、『bottom』を使用します。ベンダープレフィックスを使用しない場合は『at top』といったように頭に『at 』を付ける必要がありますのでご注意下さい。

div.hoge {
	background: radial-gradient(at left, #FFFFFF, #FF0000);
	background: -webkit-radial-gradient(left, #FFFFFF, #FF0000);
	background: -moz-radial-gradient(left, #FFFFFF, #FF0000);
	background: -ms-radial-gradient(left, #FFFFFF, #FF0000);
	height: 200px;
	margin: 10px;
}

『開始位置』指定の記述は『left』などの単語で記述することもできますが、『%』や『px』などの単位を添えた数値で指定することも可能です。ベンダープレフィックスを使用しない場合は『at 30% 20%』といったように頭に『at 』を付ける必要がありますのでご注意下さい。

div.hoge {
	background: radial-gradient( at 30% 20%, #FFFFFF, #FF0000);
	background: -webkit-radial-gradient(30% 20%, #FFFFFF, #FF0000);
	background: -moz-radial-gradient(30% 20%, #FFFFFF, #FF0000);
	background: -ms-radial-gradient(30% 20%, #FFFFFF, #FF0000);
	height: 200px;
	margin: 10px;
}

途中色を追加することで複数色のグラデーションを指定することができます。追加するときは『,』で区切り『途中色』を追加してください。

div.hoge {
	background: radial-gradient(#FFFFFF, #FFFF00, #FF0000);
	background: -webkit-radial-gradient(#FFFFFF, #FFFF00, #FF0000);
	background: -moz-radial-gradient(#FFFFFF, #FFFF00, #FF0000);
	background: -ms-radial-gradient(#FFFFFF, #FFFF00, #FF0000);
	height: 200px;
	margin: 10px;
}

背景画像に重ねて、グラデーションをかけることもできます。

div.hoge {
	background: -moz-linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 0, 0.6), rgba(255, 0, 255, 0.6)), url(dictionary-css/img/sample.jpg);
	background: -webkit-linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 0, 0.6), rgba(255, 0, 255, 0.6)), url(dictionary-css/img/sample.jpg);
	background: -ms-linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 0, 0.6), rgba(255, 0, 255, 0.6)), url(dictionary-css/img/sample.jpg);
	background: radial-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 0, 0.6), rgba(255, 0, 255, 0.6)), url(dictionary-css/img/sample.jpg);
	height: 200px;
}

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。