CSS3 Linear Gradients, CSS3 Linear Gradients with Examples

<!DOCTYPE html>
	<html>
		<head>
			<title>CSS3 Linear Gradients</title>
		</head>
		<body>
			
			<style type="text/css">
				 .top_to_bottom { width: 250px; 
					height: 100px; 
					background:#F60; 
					background: -webkit-linear-gradient(#F60, #FFC); 
					background: -ms-linear-gradient(#F60, #FFC); 
					background: linear-gradient(#F60, #FFC); 
					margin:0px 0px 30px;
					}
					 
				.left_to_right { 
					width: 250px; 
					height: 100px; 
					background:#F60; 
					background: -webkit-linear-gradient(left, #F60, #FFC); 
					background: -ms-linear-gradient(left, #F60, #FFC); 
					background: linear-gradient(left, #F60, #FFC); 
					margin:0px 0px 30px;
					}
					 
				.diagonal{ 
					width: 250px; 
					height: 100px; 
					background:#F60; 
					background: -webkit-linear-gradient(bottom left, #F60, #FFC); 
					background: -ms-linear-gradient(bottom left, #F60, #FFC); 
					background: linear-gradient(to top right, #F60, #FFC); 
					margin:0px 0px 30px;
					}
					 
				.multiple_colors{ 
					width: 250px; 
					height: 100px; 
					background:#F60; 
					background: -webkit-linear-gradient(#F60, #0099da, #F60); 
					background: -ms-linear-gradient(#F60, #0099da, #F60); 
					background: linear-gradient(#F60, #0099da, #F60); 
					margin:0px 0px 30px;
					}
					 
				.multiple_colors_2{ 
					width: 250px; 
					height: 100px; 
					background:#F60; 
					background: -webkit-linear-gradient(#F60 30%, #0099da 70%, #F60 40%); 
					background: -ms-linear-gradient(#F60 30%, #0099da 70%, #F60 40%); 
					background: linear-gradient(#F60 30%, #0099da 70%, #F60 40%); 
					}
			 </style>
			 
			<h4>Linear Gradient -Top to Bottom</h4>
			<div class="top_to_bottom"></div>
			
			<h4>Linear Gradient -Left to Right</h4>
			<div class="left_to_right"></div>
			
			<h4>Linear Gradient - Diagonal</h4>
			<div class="diagonal"></div>
			
			<h4>Linear Gradient - Multiple Colors</h4>
			<div class="multiple_colors"></div>
			
			<div class="multiple_colors_2"></div>
			
			  
		</body>
	</html>

Output :

Topic : Linear Gradients