CSS radial-gradient() 関数
CSS 関数例
次の例は、放射状グラデーション - 色ノードが均等に分布する場合を示しています。
#grad {
background-image: radial-gradient(red, green, blue);
}
試してみる »
定義と使用法
radial-gradient() 関数は、放射状グラデーションで「画像」を作成します。
放射状グラデーションは中心点によって定義されます。
放射状グラデーションを作成するには、2つの終止色（カラーストップ）を設定する必要があります。
放射状グラデーションの例
対応バージョン：CSS3
ブラウザサポート
表内の数字は、その関数をサポートする最初のブラウザバージョン番号を示します。
"webkit"、"moz"、"o" で指定された数字は、その関数をサポートする最初のバージョン番号のプレフィックスです。
| 関数 | |||||
|---|---|---|---|---|---|
| radial-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
CSS 構文
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
| 值 | 説明 |
|---|---|
| shape | 円の種類を指定します：
|
| size | グラデーションのサイズを定義します。可能な値：
|
| position | グラデーションの位置を定義します。可能な値：
|
| start-color, ..., last-color | グラデーションの開始色と終了色を指定するために使用されます。 |
その他の例
例
色ノードが不均等に分布する場合：
#grad {
background-image: radial-gradient(red 5%, green 15%, blue 60%);
}
試してみる »
例
異なるサイズキーワードの使用：
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}
試してみる »
CSS チュートリアル：CSS3 グラデーション
その他の拡張