放射状(円形)グラデーション Radial gradient

放射状(円形)グラデーションについて

グラデーションはbackgroundまたはbackground-imageプロパティにradial-gradient関数を設定します。
サイズ、形状、方向は省略でき、サイズはcover、形状はellipse、方向はcenter centerが初期値として設定されます。

構文

							background:radial-gradient(サイズ 形状 at 方向, 開始色, 終了色);
							旧Mozilla仕様:
							background:-moz-radial-gradient(方向, 形状・サイズ, 開始色, 終了色);
							旧Webkit仕様:
							background:-webkit-radial-gradient(方向, 形状・サイズ, 開始色, 終了色);
							または
							background:-webkit-gradient(radial, 開始位置, 開始位置の半径, 終了位置, 終了位置の半径, from(開始色), to(終了色));
						
形状
名称 設定値
circle 正円
ellipse 楕円(初期値)
サイズ
名称 設定値
closest-side (contain) 要素の大きさの一番近い辺に合わせる
closest-corner 要素の大きさの一番近い角に合わせる
farthest-side 要素の大きさの一番遠い辺に合わせる
farthest-corner (cover) 要素の大きさの一番遠い角に合わせる(初期値)
方向
名称 設定値 設定値 旧Webkit仕様
中央(上下左右) center center(初期値) center center(初期値)
左上→右下 left top left top
上中央→下中央 center top center top
右上→左下 right top right top
左下→右上 left bottom left bottom
下中央→上中央 center bottom center bottom
右下→左上 right bottom right bottom

サンプル

中央

左上→右下

上中央→
下中央

右上→左下

CSS

グラデーションポイントの追加

グラデーションの途中にポイントを追加して色を挿入することができます。
位置を省略した場合は、均等に配置されます(ただし、旧Webkit仕様でcolor-stopを使用している場合は、省略することができません)。

構文

							background:radial-gradient(サイズ 形状 at 方向, 開始色, 途中色, 終了色);
							旧Mozilla仕様:
							background:-moz-radial-gradient(方向, 形状・サイズ, 開始色, 途中色, 終了色);
							旧Webkit仕様:
							background:-webkit-radial-gradient(方向, 形状・サイズ, 開始色, 途中色, 終了色);
							または
							background:-webkit-gradient(radial, 開始位置, 開始位置の半径, 終了位置, 終了位置の半径, color-stop(開始位置, 開始色), color-stop(途中位置, 途中色), color-stop(終了位置, 終了色)));
						

サンプル

中央

左上→右下

上中央→
下中央

右上→左下

実行例

CSS

CSS3逆引きリファレンス一覧へ戻る