css-gradient.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS gradient</title>
<style>

.div1 {
	padding: 40px 40px; 
	background: -webkit-linear-gradient(left, white, dodgerblue); 
	width: 400px;
	
	border-radius: 25px;
	margin-left: auto;
	margin-right: auto; 
	margin-top: 100px;
	
}

.div2 {
	padding: 40px 40px; 
	background: radial-gradient(dodgerblue, white); 
	width: 400px;
	
	border-top-left-radius: 20px;
	border-top-right-radius: 10px;
	margin-left: auto;
	margin-right: auto; 
	margin-top: 100px;
	
	
}


</style>
</head>
<body>

<div>This example is based on code from the Microsoft presentations related to 98-375. This example shows how background gradients works in CSS3. Tested with Safari Browser.  </div>

<div class="div1"> test </div>

<div class="div2"> test2 </div>

</body>
</html>