【radial-gradient】放射状のグラデーション

radial-gradientで放射状のグラデーションを設定する

CSSで画像が指定可能な場所では、url()の代わりにradial-gradient()で、放射状のグラデーションを設定することができます。

基本的な設定方法は、下記の形式になっています。

background: radial-gradient(円の種類 円の大きさ 中心の位置 中心の色, 外側の色);

円の種類

radial-gradientの円の種類は、下記のキーワードで指定します。

円の大きさ

radial-gradientの円の大きさは、下記の値やキーワードが指定できます。

closest-side

closest-sideは、中心から一番近い辺までの円になります。

farthest-side

farthest-sideは、中心から一番遠い辺までの円になります。

closest-corner

closest-cornerは、中心から一番近い角までの円になります。

farthest-corner

farthest-cornerは、中心から一番遠い角までの円になります。

中心の位置の指定

radial-gradientの中心の位置は、atに続けて下記の値やキーワードで指定します。
中心の位置は省略可能で、デフォルト値は「center」です。

• 単位つきの数値
• パーセンテージ
• center
• top
• bottom
• left
• right

単位つきの数値、パーセンテージの指定

中心の位置を数値やパーセンテージの指定の場合は、atに続けて半角スペース区切りで2つ指定します。
1つ目は横方向の位置、2つ目は縦方向の位置になります。

radial-gradient(at 10px 60px, blue, white)

キーワードの指定

中心の位置のキーワードは、atに続けて「center」「left」「right」「top」「bottom」のキーワードを指定します。

at center

at left

at right

at top

at bottom

at top left

at top right

at bottom right

at bottom left

色の指定

色は背景色などの指定と同じく、16進数やRGBなどで指定します。

また、開始色と終了色は、その色になる位置を指定することもできます。

位置は、色の指定の後に半角スペースで区切って、「単位を付けた実数」または「パーセンテージ」で指定します。

さらに開始色と終了色の間には、途中の色をいくつでも設定可能です。

radial-gradient(at center, blue 10%, white 40%, blue 80%)

放射状のグラデーションのまとめ

今回は、放射状のグラデーションの設定についてまとめました。
linear-gradientよりも設定できる値が多い分、難しいですが色の指定方法は同じです。

みいと

TwitterContact

興味を持ったものをいろいろと勉強しています。