円形グラデーションを表示するには？ - radial-gradientの解説

円形グラデーションを表示するには?

関数書式

radial-gradient( 【中心の位置】, 【形状】, 【色指定】, 【色指定】 [, 【色指定】...])

対応ブラウザ

IE 9：×
Firefox 10.0：○(-moz-radial-gradient)
Opera 11.61：○(-o-radial-gradient)
Chrome 17.0：○(-webkit-radial-gradient)
Safari 5.1：○(-webkit-radial-gradient)

※現在、動作にベンダープレフィックスが必要なブラウザは、括弧内にベンダープレフィックス付のプロパティを記載しています。
※ブラウザはWindows 7上で動作確認を行っています。
※ユーザーの設定より、異なる挙動をする場合があります。

引数一覧

色指定以外の引数はすべて省略可能です。

以下、文中での「ボックス」は、プロパティが適用される要素が占める四角形の領域のことを指します。

引数	値	内容
中心の位置	【横】【縦】	円形グラデーションの中心点のボックスのなかでの位置を指定します。指定可能な値はbackground-positionプロパティと同様です。ボックスの左上からの、横と縦の位置について、top left bottom right centerのキーワードと、単位つきの数値による指定ができます。省略時の既定値はcenterです。
形状	circle 【サイズ】	円形グラデーションは正円になります。circleとサイズの順番は逆でも構いません。サイズの省略時の既定値はcoverです。
	ellipse 【サイズ】	円形グラデーションは楕円になります。ellipseとサイズの順番は逆でも構いません。サイズの省略時の既定値はcoverです。「形状」自体が省略された場合は、「ellipse cover」になります。
	【横軸の半径】【縦軸の半径】	円形グラデーションは横軸の半径と縦軸の半径が指定した長さの楕円になります。-moz-radial-gradient()は対応していません。
サイズ	closest-side	円形グラデーションは外周が中心点から最も近い辺に内接するサイズになります。
	farthest-side	円形グラデーションは外周が中心点から最も遠い辺に内接するサイズになります。
	closest-corner	円形グラデーションは外周が中心点から最も近い角に接するサイズになります。
	farthest-corner	円形グラデーションは外周が中心点から最も遠い角に接するサイズになります。
	contain	closest-sideと同じです。
	cover	farthest-cornerと同じです。
色指定	【色】【長さ】	中心点から外周へ向けて、指定されたそれぞれの色に、指定された順番でグラデーションしていきます。任意の数指定可能ですが、最低限、開始と終了の二点の色は指定する必要があります。省略可能な「長さ」を指定すると、中心と外周を結ぶ線の上で、その長さの地点になったとき、その色になるようにグラデーションします。「長さ」を省略した場合は均等に調整されます。たとえば、開始と終了のみ色指定した場合、既定では「開始色 0%, 終了色 100%」と指定したのと同様になります。円形グラデーションの外周が囲んでいるボックスより小さい場合は、ボックスの残りの部分は最後の色指定の色になります。

解説文

CSS3のグラデーションには線形グラデーションと円形グラデーションがあり、円形グラデーションは、中心点から外周へと半径に沿って変化していくグラデーションを指します。

radial-gradient()はこの円形グラデーションを生成するCSS 関数です。radial-gradient()自体はプロパティではなく、画像を指定するCSSプロパティに値として設定することで、指定した内容の円形グラデーションを表示させることができます。

仕様では、任意の画像を扱うプロパティの値として使用できることになっていますが、現状の実装では、backgroundプロパティおよびbackground-imageプロパティにのみ指定可能です。

もっとも単純な円形グラデーションの指定では、開始色と終了色のみ指定します。

以下の例では、中心の白から外周の黒へと、徐々に色彩が均等に移り変わっていきます。既定では、グラデーションの中心点の位置はボックスの中心（center center）となり、グラデーションの形状とサイズは、ボックスの頂点を外周が通る大きさ（cover）の楕円形（ellipse）になります。

#element_id{
    width:500px;
    height:300px;
    background-image:radial-gradient(white, black);
}

色指定は任意の数追加できます。以下の例では、青から黄色へ推移し、外周で赤になります。

#element_id{
    width:500px;
    height:300px;
    background-image:radial-gradient(blue, yellow, red);
}

以下では中心点をボックスの左端から100px、上端から150pxに移動させています。

#element_id{
   width:500px;
   height:300px;
   background-image:radial-gradient(100px 150px, blue, yellow, red);
}

既定では楕円（ボックスが正方形なら正円）になりますが、形状の指定もできます。以下の例では、長方形のボックスに対して正円の円形グラデーションを指定しています。

#element_id{
   width:500px;
   height:300px;
   background-image:radial-gradient(100px 150px, circle, blue, yellow, red);
}

既定ではボックスの四隅を外周が通るようなサイズの円形グラデーションになりますが、以下の例では、中心から最も近い辺に外周が接するサイズを指定しています。

この例ではボックスの左側の辺が最も近いので、グラデーションの外周が、左側の辺に接しています。ボックスの残りの部分は外周の色である赤になります。

#element_id{
   width:500px;
   height:300px;
   background-image:radial-gradient(100px 150px, circle closest-side, blue, yellow, red);
}

既定ではグラデーションは均等に行われますが、ちょうどその色になる地点を指定することもできます。色指定引数で、色の指定の後に「長さ」を指定すると、中心からの距離がその長さの地点で、ちょうどその色になるようにグラデーションが調整されます。

以下の例では、中心から外周までの距離を基準に、10%の地点までは青で、40%の地点でちょうど黄色になり、外周でちょうど赤になるように指定しています。

#element_id{
    width:500px;
    height:300px;
    background-image:radial-gradient(blue 10%, yellow 50%, red 100%);
}

サンプルソース1

※長方形のボックスに、ボックスの四隅を外周が通るサイズの、中心から青、黄、赤と推移していく楕円形の円形グラデーションを表示する例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div#box {
    width:500px;
    height:300px;
    background-image:radial-gradient(blue,yellow,red); /* 標準 */
    background-image:-moz-radial-gradient(blue,yellow,red); /* Firefox */
    background-image:-o-radial-gradient(blue,yellow,red); /* Opera */
    background-image:-webkit-radial-gradient(blue,yellow,red); /* Chrome, Safari */
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

サンプルソース2

※長方形のボックスの右下の位置(400px,200px)を中心として、もっとも近い辺に外周が接するサイズで、中心が青となり、中心から70%で黄色になり、外周で黒になるように推移していく、正円の円形グラデーションを表示する例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div#box {
    width:500px;
    height:300px;
    background-image:radial-gradient(400px 200px, circle closest-side, blue 0%, yellow 70%, black 100%); /* 標準 */
    background-image:-moz-radial-gradient(400px 200px, circle closest-side, blue 0%, yellow 70%, black 100%); /* Firefox */
    background-image:-o-radial-gradient(400px 200px, circle closest-side, blue 0%, yellow 70%, black 100%); /* Opera */
    background-image:-webkit-radial-gradient(400px 200px, circle closest-side, blue 0%, yellow 70%, black 100%); /* Chrome, Safari */
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

radial-gradientの解説