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

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

ブラウザ	ベンダープレフィックスが必要なバージョン
Chrome	Chrome 25以下
Safari	Safari 6以下
Firefox	Firefox 16以下
Android	Android 5.0以下
iOS	iOS 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;
}

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

トップページへ

WebProgrammingPortalウェブプログラミングポータル