radial-gradient

概要

CSS の radial-gradient() 関数は、原点であるグラデーションの中心から放射状に延びる、カラーのグラデーションを表現する <image> を作ります。この関数の結果は CSS の <gradient> データ型のオブジェクトです。

放射状グラデーションは中心位置、最終形状の輪郭線と位置、カラーストップで定義されます。放射状グラデーションは中心から最終形状に向かい、潜在的にはそれを超えて延びるもので、最終形状と一致する、連続した一様に拡大する同心の形状でできています。カラーストップは、中心から右方向に水平に延びる仮想的なグラデーションレイの上に配置されます。カラーストップの位置を決めるパーセンテージは、最終形状とこのグラデーションレイの交点を 100% としたときの相対値です。各形状は単色で、色は交差したグラデーションレイの色によって定義されます。

最終形状として選べるのは circle か ellipse のみです。

CSS グラデーションは CSS の <color> ではなく、固有のサイズを持たない画像です。これは、画像本来のサイズや、優先されるサイズを持たないということです（アスペクト比についても同様です）。実際のサイズは、グラデーションの用いられる要素にマッチしたものになるでしょう。

radial-gradient 関数の構文では、グラデーションの繰り返しは行えません。繰り返しを関数で行うなら、CSS の repeating-radial-gradient 関数を使ってください。

構文

 Formal grammar: radial-gradient( [[ circle || <length> ] [ at <position> ]? , | [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? , | [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? , | at <position> , <color-stop> [ , <color-stop> ]+ ) \------------------------------------------------------------------------------/\--------------------------------/ Definition of the contour, size and position of the ending shape List of color stops where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side and <color-stop> = <color> [ <percentage> | <length> ]? Definition of the ending shape radial-gradient( circle, … ) /* Synonym of radial-gradient( circle farthest-corner, …) */ radial-gradient( ellipse, … ) /* Synonym of radial-gradient( ellipse farthest-corner, …) */ radial-gradient( <extent-keyword>, … ) /* It draws a circle */ radial-gradient( circle radius, … ) /* A centered circle of the given length. It can't be a percentage */ radial-gradient( ellipse x-axis y-axis, … ) /* The two semi-major axis are given, horizontal, then vertical */ Definition of the position of the shape radial-gradient (… at <position>, … ) Definition of the color stops radial-gradient (…, <color-stop>) radial-gradient (…, <color-stop>, <color-stop>) 

値

<position>

background-position や transform-origin と同じように扱われる位置。デフォルトは center です。

<shape>

グラデーションの形状です。circle （一定の半径の円）または ellipse（軸に沿った楕円）のいずれかを指定します。デフォルト値は ellipse です。

<size>

グラデーションのサイズです。以下に示す サイズに使われる定数 の中のひとつです。

<color-stop>

この値は <color> 値、続いて省略可能な停止位置（0% から 100% までの割合、またはグラデーション軸に沿った <length>）で構成されます。<percentage> の 0% または <length> の 0 はグラデーションの中心を表し、値 100% は最終形状と仮想的なグラデーションレイの交点を表します。中間値の <percentage> 値は、グラデーションレイ上の直線上に配置されます。

<extent-keyword>

最終的な形状がとるべき大きさを記述するキーワードです。以下に示す サイズに使われる定数 の中のひとつです。

以前の草案では他のキーワード (cover と contain) をそれぞれ標準的な farthest-corner と closest-side の別名として定義していました。一部の実装は古い 2 つの変数を外したので、標準的なキーワードだけを使ってください。

例

background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);

background-image: radial-gradient(ellipse farthest-corner at 470px 47px , #FFFF80 20%, rgba(204, 153, 153, 0.4) 30%, #E6E6FF 60%);

background-image: radial-gradient(farthest-corner at 45px 45px , #FF0000 0%, #0000FF 100%);

background-image: radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);

仕様

ブラウザ実装状況

^[1] Internet Explorer 5.5 から 9.0 はプロプライエタリな filter: progid:DXImageTransform.Microsoft.Gradient() 関数をサポートしています。

^[2] WebKit は 528 からレガシーな -webkit-gradient(radial,…) 関数 をサポートしています。radial gradients について、Apple の 現在のサポートページも参照してください。

^[3] Firefox 3.6 と Webkit が実装、プレフィックスあり、以前の構文。

関連情報

• CSS グラデーションの利用, repeating-radial-gradient, linear-gradient
• WebKit の原案: https://webkit.org/blog/175/introducing-css-gradients/
• WebKit の新しい実装: https://webkit.org/blog/1424/css3-gradients/