radial-gradient （円形グラデーション）

radial-gradientプロパティは「円形グラデーション」を指定する場合に使用します。

html

<div class="square_radial_gradation"></div>

css

.square_radial_gradation {
	width: 100px;
	height: 100px;
    background-image: -webkit-gradient(
		radial,
		center center,
		0,
		center center,
		50,
		color-stop(0, #39a9d6),
		color-stop(0.5, #fff),
		color-stop(1, #2d424f)
	);

    background-image: -moz-radial-gradient(
		center,
		circle cover,
		#39a9d6 0%,
		#fff 50%,
		#2d424f 100%
	);

    background-image: radial-gradient(
		cover circle at center center,
		#39a9d6 0%,
		#fff 50%,
		#2d424f 100%
	);
}

設定方法