CSS

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

みいと

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

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

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

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

円の種類

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

circle 正円
ellipse 楕円(デフォルト値)

円の大きさ

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

単位つきの値 単位つきの数値で指定します。
パーセンテージ パーセンテージで指定します。
closest-side 中心から一番近い辺まで
farthest-side 中心から一番遠い辺まで
closest-corner 中心から一番近い角まで
farthest-corner 中心から一番遠い角まで

closest-side

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

closest-side

farthest-side

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

farthest-side

closest-corner

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

closest-corner

farthest-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)
10px 60px

 

キーワードの指定

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

at center
at center
at left
at left
at right
at right
at top
at top
at bottom
at bottom
キーワードは「at top left」のように組み合わせて、左上を中心にするようなグラデーション設定もできます。
at top left
at top left
at top right
at top right
at bottom right
at bottom right
at bottom left
at bottom left

色の指定

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

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

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

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

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

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

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

まとめ

  • radial-gradientを使うと放射状のグラデーションを設定できる
  • 円の種類には、circle、ellipseが指定できる
  • 円の大きさには、角度、またはキーワードが指定できる
  • 円の中心を省略した場合は at centerになる
  • 色は開始色と終了色を指定する
  • 開始色と終了色の間には、途中の色を指定できる
  • 色の後には半角スペースで区切って、その色になる位置を指定できる

ABOUT ME
みいと
みいと
興味を持ったものをいろいろと勉強しています。
記事URLをコピーしました