CSS3 Gradients - To: CSS3 - Information and samples

Code used in this page

#gradient {	color: #fff;
	height: 100px;
	margin-bottom: 30px;
	padding: 10px;
	
	/* For WebKit (Safari, Google Chrome etc) */
	background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
	/* For Mozilla/Gecko (Firefox etc) */
	background: -moz-linear-gradient(top, #00f, #fff);
	/* For Opera */
	background: -o-linear-gradient(top, #00f, #fff);
	/* For Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF);
}
	
#gradient-with-stop {
	color: #fff;
	height: 100px;
	margin-bottom: 30px;
	padding: 10px;
	
	/* For WebKit (Safari, Google Chrome etc) */
	background: -webkit-gradient(linear, left top, right top, from(#00f), to(#fff), color-stop(0.7, #fff));
	/* For Mozilla/Gecko (Firefox etc) */
	background: -moz-linear-gradient(left top, #00f, #fff 70%);
	/* For Opera */
	background: -o-linear-gradient(left top, #00f, #fff 70%);
	/* For Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF0000FF, endColorStr=#FFFFFFFF, GradientType=1);
}

#gradient-radial {
	color: #fff;
	width: 100px;
	height: 100px;
	padding: 10px;
	/* For WebKit (Safari, Google Chrome etc) */
	background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 60, from(#ffffa2), to(#00f));
	/* For Mozilla/Gecko (Firefox etc) */
	background: -moz-radial-gradient(40% 40%, farthest-side, #ffffa2, #00f);
	/* For Opera */
	background: -o-radial-gradient(40% 40%, farthest-side, #ffffa2, #00f);
	/* For Internet Explorer */	/* As if... */
}