前回に続きグラデーションのことを書きます。今回は円形グラデーションについてです。

私はほとんど円形グラデーションは使用していないので、たまに使うと書式を忘れてしまっているので書いておきます。

書式

本当は結構複雑な書式ですが、ここでは簡単な書式を示します。
backbround: radial-gradient(形状またはサイズ at 開始位置, 開始色, 途中色, 終了色);

形状
　・circle(円)
　・ellipse(楕円 初期値)

サイズ
　・closest-side(一番近い辺に合わせる)
　・closest-corner(一番近い角に合わせる)
　・farthest-side(一番遠い辺に合わせる)
　・farthest-corner(一番遠い角に合わせる 初期値)

開始位置（円の中心点）
　・left
　・center(初期値)
　・right
　・top
　・bottom
　・◯％ ◯％
　・◯px ◯px
途中色は省略可能です。

※開始位置がtop、bottom、left、rightで一番近い辺と角のパターンはサイズが0になってしまい、グラデーションが掛かりませんので省略します。

開始位置を指定した例

sample1
background: radial-gradient(#00f, #0f0); 開始色と終了色だけ指定
sample2
background: radial-gradient(ellipse closest-side at center, #00f, #0f0); 形状は楕円、サイズは一番近い辺、中心からグラデーション
sample3
background: radial-gradient(ellipse farthest-side at center, #00f, #0f0); 形状は楕円、サイズは一番遠い辺、中心からグラデーション
sample4
background: radial-gradient(ellipse closest-corner at center, #00f, #0f0); 形状は楕円、サイズは一番近い角、中心からグラデーション
sample5
background: radial-gradient(ellipse farthest-corner at center, #00f, #0f0); 形状は楕円、サイズは一番遠い角、中心からグラデーション
sample6
background: radial-gradient(ellipse farthest-side at top, #00f, #0f0); 形状は楕円、サイズは一番遠い辺、上中央からグラデーション
sample7
background: radial-gradient(ellipse farthest-corner at top, #00f, #0f0); 形状は楕円、サイズは一番遠い角、上中央からグラデーション
sample8
background: radial-gradient(ellipse farthest-side at bottom, #00f, #0f0); 形状は楕円、サイズは一番遠い辺、下中央からグラデーション
sample9
background: radial-gradient(ellipse farthest-corner at bottom, #00f, #0f0); 形状は楕円、サイズは一番遠い角、下中央からグラデーション
sample10
background: radial-gradient(ellipse farthest-side at left, #00f, #0f0); 形状は楕円、サイズは一番遠い辺、左中央からグラデーション
sample11
background: radial-gradient(ellipse farthest-corner at left, #00f, #0f0); 形状は楕円、サイズは一番遠い角、左中央からグラデーション
sample12
background: radial-gradient(ellipse farthest-side at left top, #00f, #0f0); 形状は楕円、サイズは一番遠い辺、左上からグラデーション
sample13
background: radial-gradient(ellipse farthest-corner at left top, #00f, #0f0); 形状は楕円、サイズは一番遠い角、左上からグラデーション
sample14
background: radial-gradient(ellipse farthest-side at left bottom, #00f, #0f0); 形状は楕円、サイズは一番遠い辺、左下からグラデーション
sample15
background: radial-gradient(ellipse farthest-corner at left bottom, #00f, #0f0); 形状は楕円、サイズは一番遠い角、左下からグラデーション
sample16
background: radial-gradient(ellipse farthest-side at right, #00f, #0f0); 形状は楕円、サイズは一番遠い辺、右中央からグラデーション
sample17
background: radial-gradient(ellipse farthest-corner at right, #00f, #0f0); 形状は楕円、サイズは一番遠い角、右中央からグラデーション
sample18
background: radial-gradient(ellipse farthest-corner at right top, #00f, #0f0); 形状は楕円、サイズは一番遠い辺、右上からグラデーション
sample19
background: radial-gradient(ellipse farthest-corner at right top, #00f, #0f0); 形状は楕円、サイズは一番遠い角、右上からグラデーション
sample20
background: radial-gradient(ellipse farthest-corner at right bottom, #00f, #0f0); 形状は楕円、サイズは一番遠い辺、右下からグラデーション
sample21
background: radial-gradient(ellipse farthest-corner at right bottom, #00f, #0f0); 形状は楕円、サイズは一番遠い角、右下からグラデーション
sample22
background: radial-gradient(ellipse closest-side at 25% 25%, #00f, #0f0); 形状は円、左から２５％、上から２５％の一番近い辺からグラデーション
sample23
background: radial-gradient(ellipse farthest-side at 25% 25%, #00f, #0f0); 形状は円、左から２５％、上から２５％の一番遠い辺からグラデーション
sample24
background: radial-gradient(ellipse closest-corner at 25% 25%, #00f, #0f0); 形状は円、左から２５％、上から２５％の一番近い角からグラデーション
sample25
background: radial-gradient(ellipse farthest-corner at 25% 25%, #00f, #0f0); 形状は円、左から２５％、上から２５％の一番遠い角からグラデーション

透明度を指定した例

sample26
background: radial-gradient(circle closest-side at center, #00f, #0f0); 形状は円、サイズは一番近い辺、中心からグラデーション
sample27
background: radial-gradient(circle closest-side at center, #00f, #0f0); 形状は円、サイズは一番近い辺、中心からグラデーション
sample28
background: radial-gradient(circle closest-side at center, #00f, #0f0); 形状は円、サイズは一番近い辺、中心からグラデーション

途中で色を変える例

sample29
background: radial-gradient(circle closest-side at center, #00f, #f00, #0f0); 形状は円、サイズは一番近い辺、中心からグラデーション

色々なパターンを表示していたら長くなってしまいました。最後まで読んでいただき、ありがとうございます。