備忘録的プログラミングリファレンス

radial-gradient()関数

 radial-gradient()関数は、2色以上の放射状のグラデーションを生成する関数です。放射状の中心点は指定できます。<gradient>データ型であり、<image>データ型の派生です。

 radial-gradient()関数は<image>データ型に属します。そのために<image>データ型が使用できるプロパティのみで使えます。

背景色を、赤色を0%~30%の範囲まで、黄色を70%~100%の範囲にし、30%~70%は赤色から黄色のグラデーション(Exampleを参照
background-image: radial-gradient(red 0% 30%, yellow 70% 100%);

 線形グラデーションを表示するにはlinear-gradient()関数を利用します。

関連プロパティ

 以下は関連するプロパティです。

プロパティ概要
backgroundバックグランドプロパティの一括指定
background-attachmentスクロールによるバックグランドの表示位置
background-blend-mode複数の背景画像や配色を混ぜ合わせる
background-clipborder、paddingを領域に含めるか
background-colorCSSのColorの指定
background-image画像の挿入
background-origin繰り返し表示を開始する位置
background-position画像の配置位置
background-repeat画像の繰り返し(デフォルトは繰り返し)
background-size()画像のサイズ
linear-gradient()線形グラデーション関数

構文(Syntax)

CSS

radial-gradient(circle at center, color end1, color end2,...)

Example

 radial-gradient()関数の例です。この関数は、<image>データ型が使用できるプロパティのみで使えます。 関数による返り値がプロパティの値になります。

 ここでは背景に円形グラデーションを表示します。