概要

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

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

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

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-positiontransform-origin と同じように扱われる位置。デフォルトは center です。
<shape>
グラデーションの形状です。circle (一定の半径の円)または ellipse(軸に沿った楕円)のいずれかを指定します。デフォルト値は ellipse です。
<size>
グラデーションのサイズです。以下に示す サイズに使われる定数 の中のひとつです。
<color-stop>
この値は <color> 値、続いて省略可能な停止位置(0% から 100% までの割合、またはグラデーション軸に沿った <length>)で構成されます。<percentage>0% または <length>0 はグラデーションの中心を表し、値 100% は最終形状と仮想的なグラデーションレイの交点を表します。中間値の <percentage> 値は、グラデーションレイ上の直線上に配置されます。
<extent-keyword>
最終的な形状がとるべき大きさを記述するキーワードです。以下に示す サイズに使われる定数 の中のひとつです。
定数 説明
closest-side グラデーションの形状は、その中心から最も近いグラデーションボックスの辺に(circle の場合)、またはその中心から最も近い縦と横の辺に(ellipse の場合)内接します。
closest-corner グラデーションの形状は、その中心から最も近いグラデーションボックスの頂点に接します。
farthest-side 形状がその中心から最も遠い辺(または縦と横の辺)に接することを除いて closest-side と同じです。
farthest-corner グラデーションの形状は、その中心から最も遠いグラデーションボックスの頂点に接します。

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

 

ellipse farthest-corner
background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
470px 47px
background-image: radial-gradient(ellipse farthest-corner at 470px 47px , #FFFF80 20%, rgba(204, 153, 153, 0.4) 30%, #E6E6FF 60%);
farthest-corner
background-image: radial-gradient(farthest-corner at 45px 45px , #FF0000 0%, #0000FF 100%);
16px radius fuzzy circle
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);

仕様

仕様書 策定状況 コメント
CSS Images Module Level 3
radial-gradients() の定義
勧告候補  

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本サポート (radial-gradient() 関数のサポート。最終版の構文で使う必要はない) 3.6 (1.9.2)-moz[3]
16 (16)
10.0 (534.16)-webkit [2][2] 10.0 [1] 11.60-o 5.1-webkit[2]
Legacy な webkit の構文 未サポート 3-webkit [2] 未サポート 未サポート 4.0-webkit[2]
at syntax (最終版の標準構文) 10 (10)-moz[3]
16 (16)
未サポート 10.0 11.60-o[4]
Presto 2.12 でプレフィックスを取り除く予定
未サポート
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート (radial-gradient() 関数のサポート。最終版の構文で使う必要はない) (有) 1.0 (1.9.2)-moz [3]
16.0 (16)
(有) (有) (有)
Legacy な webkit の構文 ? 未サポート ? ? ?
at syntax (最終版の標準構文) ? 10.0 (10)-moz [3]
16.0 (16)
? ? ?

[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 が実装、プレフィックスあり、以前の構文。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: Sebastianz, wizAmit, slayslot, dskmori, ethertank, sosleepy, FredB, Level
最終更新者: Sebastianz,