放射状（円形）グラデーション 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

/* 中央 */
								div.sample {
									background:-webkit-gradient(radial, center center, 0, center center, 100, from(#ff0000), to(#0000ff));
									background:-webkit-radial-gradient(center, circle cover, #ff0000, #0000ff);
									background:-moz-radial-gradient(center, circle cover, #ff0000, #0000ff;
									background:-o-radial-gradient(center, circle cover, #ff0000, #0000ff);
									background:radial-gradient(#ff0000, #0000ff);
								}

/* 左上 → 右下 */
								div.sample {
									background:-webkit-gradient(radial, left top, 0, left top, 100, from(#ff0000), to(#0000ff));
									background:-webkit-radial-gradient(left top, circle cover, #ff0000, #0000ff);
									background:-moz-radial-gradient(left top, circle cover, #ff0000 0, #0000ff);
									background:-o-radial-gradient(left top, circle cover, #ff0000, #0000ff);
									background:radial-gradient(farthest-side circle at left top, #ff0000, #0000ff);
								}

/* 上中央 → 下中央 */
								div.sample {
									background:-webkit-gradient(radial, center top, 0, center top,100, from(#ff0000), to(#0000ff));
									background:-webkit-radial-gradient(center top, circle cover, #ff0000, #0000ff);
									background:-moz-radial-gradient(center top, circle cover, #ff0000, #0000ff);
									background:-o-radial-gradient(center top, circle cover, #ff0000, #0000ff);
									background:radial-gradient(farthest-side circle at center top, #ff0000, #0000ff);
								}

/* 右上 → 左下 */
								div.sample {
									background:-webkit-gradient(radial, right top, 0, right top, 100, from(#ff0000), to(#0000ff));
									background:-webkit-radial-gradient(right top, circle cover, #ff0000, #0000ff);
									background:-moz-radial-gradient(right top, circle cover, #ff0000, #0000ff);
									background:-o-radial-gradient(right top, circle cover, #ff0000, #0000ff);
									background:radial-gradient(farthest-side circle at right top, #ff0000, #0000ff);
								}

形状
サイズ
開始位置（X軸）
開始位置（Y軸）

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

グラデーションの途中にポイントを追加して色を挿入することができます。
位置を省略した場合は、均等に配置されます（ただし、旧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

/* 中央 */
								div.sample {
									background:-webkit-gradient(radial, center center, 0, center center, 50, color-stop(0, #ff0000), color-stop(0.5, #00ff00), color-stop(1, #0000ff));
									background:-webkit-radial-gradient(center, circle cover, #ff0000, #00ff00 50%, #0000ff);
									background:-moz-radial-gradient(center, circle, #ff0000, #00ff00 50%, #0000ff);
									background:-o-radial-gradient(center, circle, #ff0000, #00ff00 50%, #0000ff);
									background:radial-gradient(#ff0000, #00ff00 50%, #0000ff);
								}

/* 左上 → 右下 */
								div.sample {
									background:-webkit-gradient(radial, left top, 0, left top, 50, color-stop(0, #ff0000), color-stop(0.5, #00ff00), color-stop(1, #0000ff));
									background:-webkit-radial-gradient(left top, circle cover, #ff0000, #00ff00 50%, #0000ff);
									background:-moz-radial-gradient(left top, circle cover, #ff0000, #00ff00 50%, #0000ff);
									background:-o-radial-gradient(left top, circle cover, #ff0000, #00ff00 50%, #0000ff);
									background:radial-gradient(farthest-side circle at left top, #ff0000, #00ff00 50%, #0000ff);
								}

/* 上中央 → 下中央 */
								div.sample {
									background:-webkit-gradient(radial, center top, 0, center top, 50, color-stop(0, #ff0000), color-stop(0.5, #00ff00), color-stop(1, #0000ff));
									background:-webkit-radial-gradient(center top, circle cover, #ff0000, #00ff00 50%, #0000ff);
									background:-moz-radial-gradient(center top, circle cover, #ff0000, #00ff00 50%, #0000ff);
									background:-o-radial-gradient(center top, circle cover, #ff0000, #00ff00 50%, #0000ff);
									background:radial-gradient(farthest-side circle at center top, #ff0000, #00ff00 50%, #0000ff);
								}

/* 右上 → 左下 */
								div.sample {
									background:-webkit-gradient(radial, right top, 0, right top, 50, color-stop(0, #ff0000), color-stop(0.5, #00ff00), color-stop(1, #0000ff));
									background:-webkit-radial-gradient(right top, circle cover, #ff0000, #00ff00 50%, #0000ff);
									background:-moz-radial-gradient(right top, circle cover, #ff0000, #00ff00 50%, #0000ff);
									background:-o-radial-gradient(right top, circle cover, #ff0000, #00ff00 50%, #0000ff);
									background:radial-gradient(farthest-side circle at right top, #ff0000, #00ff00 50%, #0000ff);
								}

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