radial-gradient関数は、backgroundプロパティなどの背景関連のプロパティの値に指定して、円形のグラデーションを表す関数です。
線形のグラデーションを表す、「linear-gradient」と同じく、関数の引数は、半角スペースとカンマ（,）で区切って指定します。
linear-gradientと違うところは、グラデーションの方向ではなく、形状・サイズ・中心位置を決めること。
関連記事
『linear-gradientで線形のグラデーションにする【CSS】』
グラデーションの形状
グラデーションの形状を以下の2つのキーワードで指定します。
- circle・・・正円のグラデーション
- ellipse・・・楕円のグラデーション
初期値では「ellipse」が指定されています。
グラデーションのサイズ
グラデーションのサイズを指定します。
- closet-side・・・円の中心から一番近い辺に合ったサイズ
- farset-side・・・円の中心から一番遠い辺に合ったサイズ
- closet-corner・・・円の中心から一番近い角に合ったサイズ
- farset-corner・・・円の中心から一番遠い角に合ったサイズ
また、%値や単位付きの数値でも指定することができます。
この場合、水平・垂直方向の半径を半角スペースで区切って指定します。
%値は親ボックスの幅と高さに対する割合となります。
グラデーションの中心位置
グラデーションの中心の位置を指定します。
| at top | 上辺が中心 |
|---|---|
| at top right | 右上角が中心 |
| at right | 右辺が中心 |
| at bottom right | 右下角が中心 |
| at bottom | 下辺が中心 |
| at bottom left | 左下角が中心 |
| at left | 左辺が中心 |
| at top left | 左上が中心 |
| at center | 領域の中央が中心 |
省略した場合は、「at center」になります。
また、%値や単位付きの数値でも指定することができます。
%値は領域の幅と高さの割合となり、中心の座標を%値で指定します。
単位付き数値の基準となるのは、領域の左上角です。
グラデーションの色
色はグラデーションの始点と終点の色を指定します。
関連記事
『CSSの色の指定方法まとめ！RGBモデルやHSLモデル【CSS】』
グラデーションの開始位置と終了位置
グラデーションの始点と終点の位置を指定します。
各点の色に続けて、半角スペースで区切って記述します。
各点の位置は、%値もしくは単位つきの数値で指定し、負の値も指定することができます。
省略した場合は始点が0%、終点が100%となります。
途中点も指定可能
始点と終点だけでなく、途中点を指定して3色以上のグラデーションも表すことができます。
各点の位置を省略した場合は、色の数に合わせて均一に変化します。
円形グラデーションを繰り返し表示させる
repeating-radial-gradient関数を使って円形グラデーションを繰り返し表示させることもできます。
引数はradial-gradient関数と同じです。
Leave a Comment