radial-gradient()

background: radial-gradient(#FFFFFF, #C9C9C9);
background: -webkit-radial-gradient(#FFFFFF, #C9C9C9);
background: -moz-radial-gradient(#FFFFFF, #C9C9C9);
background: -ms-radial-gradient(#FFFFFF, #C9C9C9);

Refer to the table below for versions that require vendor prefixes.

Browser	Versions requiring vendor prefix
Chrome	Chrome 25 and earlier
Safari	Safari 6 and earlier
Firefox	Firefox 16 and earlier
Android	Android 5.0 and earlier
iOS	iOS 6.1 and earlier

background: radial-gradient(#FFFFFF, #FF0000);
background: -webkit-radial-gradient(#FFFFFF, #FF0000);
background: -moz-radial-gradient(#FFFFFF, #FF0000);
background: -ms-radial-gradient(#FFFFFF, #FF0000);

※ Version data is based on MDN / Can I Use.

Specifies a radial gradient for the background. The syntax is:
'radial-gradient(start-position angle, shape size, start-color, mid-color, end-color)'
The start position, angle, shape, size, and mid-color can all be omitted. When omitted, the defaults are: start position 'center', angle '0deg', shape 'ellipse', size 'cover', and no mid-color.

The available values for shape and size are as follows.

Available Values for 'Shape'

Value	Description
ellipse	Ellipse (initial value)
circle	Circle

div.hoge1 {
	background: radial-gradient(ellipse, #FFFFFF, #FF0000);
	background: -webkit-radial-gradient(ellipse, #FFFFFF, #FF0000);
	background: -moz-radial-gradient(ellipse, #FFFFFF, #FF0000);
	background: -ms-radial-gradient(ellipse, #FFFFFF, #FF0000);
	height: 200px;
	margin: 10px;
}

div.hoge2 {
	background: radial-gradient(circle, #FFFFFF, #FF0000);
	background: -webkit-radial-gradient(circle, #FFFFFF, #FF0000);
	background: -moz-radial-gradient(circle, #FFFFFF, #FF0000);
	background: -ms-radial-gradient(circle, #FFFFFF, #FF0000);
	height: 200px;
	margin: 10px;
}

Available Values for 'Size'

Value	Description
farthest-corner	The gradient extends until its outer edge touches the farthest corner from the center of the element. This is the initial value.
farthest-side	The gradient extends until its outer edge is inscribed within the farthest side from the center.
closest-corner	The gradient extends until its outer edge touches the nearest corner from the center of the element.
closest-side	The gradient extends until its outer edge is inscribed within the nearest side from the center.

div.hoge1 {
	background: radial-gradient(farthest-corner, #FFFFFF, #FF0000);
	background: -webkit-radial-gradient(farthest-corner, #FFFFFF, #FF0000);
	background: -moz-radial-gradient(farthest-corner, #FFFFFF, #FF0000);
	background: -ms-radial-gradient(farthest-corner, #FFFFFF, #FF0000);
	height: 200px;
	margin: 10px;
}

div.hoge2 {
	background: radial-gradient(farthest-side, #FFFFFF, #FF0000);
	background: -webkit-radial-gradient(farthest-side, #FFFFFF, #FF0000);
	background: -moz-radial-gradient(farthest-side, #FFFFFF, #FF0000);
	background: -ms-radial-gradient(farthest-side, #FFFFFF, #FF0000);
	height: 200px;
	margin: 10px;
}

div.hoge3 {
	background: radial-gradient(closest-corner, #FFFFFF, #FF0000);
	background: -webkit-radial-gradient(closest-corner, #FFFFFF, #FF0000);
	background: -moz-radial-gradient(closest-corner, #FFFFFF, #FF0000);
	background: -ms-radial-gradient(closest-corner, #FFFFFF, #FF0000);
	height: 200px;
	margin: 10px;
}

div.hoge4 {
	background: radial-gradient(closest-side, #FFFFFF, #FF0000);
	background: -webkit-radial-gradient(closest-side, #FFFFFF, #FF0000);
	background: -moz-radial-gradient(closest-side, #FFFFFF, #FF0000);
	background: -ms-radial-gradient(closest-side, #FFFFFF, #FF0000);
	height: 200px;
	margin: 10px;
}

The start position is specified using keywords such as 'top', 'left', 'right', and 'bottom'. When not using vendor prefixes, you must prepend 'at ' to the value — for example, 'at top'.

div.hoge {
	background: radial-gradient(at left, #FFFFFF, #FF0000);
	background: -webkit-radial-gradient(left, #FFFFFF, #FF0000);
	background: -moz-radial-gradient(left, #FFFFFF, #FF0000);
	background: -ms-radial-gradient(left, #FFFFFF, #FF0000);
	height: 200px;
	margin: 10px;
}

The start position can also be specified using numeric values with units like '%' or 'px'. When not using vendor prefixes, you must prepend 'at ' — for example, 'at 30% 20%'.

div.hoge {
	background: radial-gradient( at 30% 20%, #FFFFFF, #FF0000);
	background: -webkit-radial-gradient(30% 20%, #FFFFFF, #FF0000);
	background: -moz-radial-gradient(30% 20%, #FFFFFF, #FF0000);
	background: -ms-radial-gradient(30% 20%, #FFFFFF, #FF0000);
	height: 200px;
	margin: 10px;
}

You can add intermediate colors to create multi-color gradients. Separate additional colors with commas ','.

div.hoge {
	background: radial-gradient(#FFFFFF, #FFFF00, #FF0000);
	background: -webkit-radial-gradient(#FFFFFF, #FFFF00, #FF0000);
	background: -moz-radial-gradient(#FFFFFF, #FFFF00, #FF0000);
	background: -ms-radial-gradient(#FFFFFF, #FFFF00, #FF0000);
	height: 200px;
	margin: 10px;
}

You can also apply a gradient on top of a background image.

div.hoge {
	background: -moz-linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 0, 0.6), rgba(255, 0, 255, 0.6)), url(dictionary-css/img/sample.jpg);
	background: -webkit-linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 0, 0.6), rgba(255, 0, 255, 0.6)), url(dictionary-css/img/sample.jpg);
	background: -ms-linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 0, 0.6), rgba(255, 0, 255, 0.6)), url(dictionary-css/img/sample.jpg);
	background: radial-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 0, 0.6), rgba(255, 0, 255, 0.6)), url(dictionary-css/img/sample.jpg);
	height: 200px;
}