Background gradient|CSS|learning-a.com

With CSS3, you can design gradient background without using background images. There are two kinds of gradient, linear gradient and radial gradient. As for linear gradient, there are three directions: horizontal,left right; vertical, top bottom; diagonal.

Linear gradient,vertical, top to bottom (IE10+,Firefox3.6+,Chrome31+,Safari7+,Opera11.1+,iOS4+,Android4+)

Syntax:background: linear-gradient(top-color,bottom-color). For Safari, you need to add -webkit- before linear-gradient. For Opera 11.1 to 12.0, you need to add -o- before linear-gradient. For Firefox 3.6 to 15, you need to add -moz- before linear-gradient. For IE 10, you need to add -ms- before linear-gradient. To support all the above browsers, you have to add another three lines in addition to the standard syntax as the example below. The standard syntax should be put at last as the fallback.

The default linear gradient is from top to bottom. If you need linear gradient from bottom to top, the syntax is: background: linear-gradient(to top, bottom-color, top-color). An example from bottom to top with linear gradient from red to blue is: background: linear-gradient(to top, red, blue);

<html>
<head>
<style> 
div #linearGradient
{
	height:200px;
	background: -webkit-linear-gradient(red, blue); /* For Safari */
	background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
	background: -ms-linear-gradient(red, blue); /* For IE 10 */
	background: linear-gradient(red, blue); /* Standard syntax */
}
</style>
</head>
<body>
<div id="linearGradient"></div>
</body>
</html>

Linear gradient,horizontal, left to right (IE10+,Firefox3.6+,Chrome31+,Safari7+,Opera11.1+,iOS4+,Android4+)

Left to right linear gradient standard syntax:background: linear-gradient(to right, left-color,right-color). For Safari, you need to add -webkit- before linear-gradient. For Opera 11.1 to 12.0, you need to add -o- before linear-gradient. For Firefox 3.6 to 15, you need to add -moz- before linear-gradient. To support all the above browsers, you have to add another three lines in addition to the standard syntax as the example below. The standard syntax should be put at last as the fallback.

In addition, take notice of the example below: Safari, Opera and Firefox uses starting point(left) as the first argument; however, in standard syntax, to right as the first argument. The good news is that all the browser providers are supposed to support the standard syntax in their newest browsers.

If you need linear gradient from right to left, the syntax is: background: linear-gradient(to left, right-color, left-color). An example from right to left with linear gradient from red to blue is: background: linear-gradient(to left, red, blue);

<html>
<head>
<style> 
div #linearGradientLeftright
{
	height:50px;
	background: -webkit-linear-gradient(left, red, blue); /* For Safari */
	background: -o-linear-gradient(left, red, blue); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(left, red, blue); /* For Firefox 3.6 to 15 */
	background: -ms-linear-gradient(left, red, blue); /* For IE 10 */
	background: linear-gradient(to right, red, blue); /* Standard syntax */
}
</style>
</head>
<body>

<div id="linearGradientLeftright"></div>

</body>
</html>

Linear gradient, diagonal, top left to bottom right (IE10+,Firefox3.6+,Chrome31+,Safari7+,Opera11.1+,iOS4+,Android4+)

Syntax:background: linear-gradient(to ending point, starting-color,ending-color). Please read Linear gradient horizontal for further explanation. The example below shows the gradient from top left to bottom right.

<html>
<head>
<style> 
div #linearGradientTopleft
{
	height:150px;
	width: 150px;
	background: -webkit-linear-gradient(top left, red, blue); /* For Safari */
	background: -o-linear-gradient(top left, red, blue); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(top left, red, blue); /* For Firefox 3.6 to 15 */
	background: -ms-linear-gradient(top left, red, blue); /* For IE 10 */
	background: linear-gradient(to bottom right, red, blue); /* Standard syntax */
}
</style>
</head>
<body>

<div id="linearGradientTopleft"></div>

</body>
</html>

Radial gradient (IE10+,Firefox3.6+,Chrome31+,Safari7+,Opera11.1+,iOS4+,Android4+)

Syntax:background: radial-gradient(shape x-length y-length at x-center-position y-center-position, color1, color2, color3, ..., colorN); Shape can be circle or ellipse. X-length is the shape length along x-axis and y-length is the shape length along y-axis. If the shape is a circle, you need to specify only one length(either x-length or y-length) as a radius. X-center-position y-center-position indicates the coordinate of the shape center. From color1 to colorN are the colors, like red,yellow, and so on, in the radial gradient.

<html>
<head>
<style> 
div #radialGradient
{
	height:150px;
	width: 150px;

	background: radial-gradient(ellipse 250px 100px at 60% 20%, red, yellow, white, blue); /* Standard syntax */
}
</style>
</head>
<body>

<div id="radialGradient"></div>

</body>
</html>

Repeating gradient (IE10+,Firefox3.6+,Chrome31+,Safari7+,Opera11.1+,iOS4+,Android4+)

You may specify either repeating linear gradient or repeating radial gradient. Standard syntax for repeating radial gradient:background: repeating-radial-gradient(shape x-length y-length at x-center-position y-center-position, color1 color1Size, color2 color2Size, color3 color3Size, ..., colorN colorNSize); Read radial gradient for more details. ColorNSize indicates the color size or the length along radius direction. You can use either percentage or fixed pixel.

<html>
<head>
<style> 
div #repeatRadialGradient
{
	height:150px;
	width: 150px;
	

	background: repeating-radial-gradient(ellipse 250px 100px at 60% 20%, red 5%, yellow 6%, white 8%, blue 10%); /* Standard syntax */
}
</style>
</head>
<body>

<div id="repeatRadialGradient"></div>

</body>
</html>