<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>gradient</title>
<style>
.top_down { background-image: linear-gradient( red, white); }
.to_right { background-image: linear-gradient( to right, blue, white); }
.to_right1 { background-image: linear-gradient( to right, blue, white 30%); }
.to_bottom_right { background-image: linear-gradient(to bottom right, #000, white); }
/* (direction color-stop1 color_height, color-stop1 color_height ,...) */
.top_down1 { background-image: linear-gradient(to bottom, blue, white 30px 70px, blue); }
.top_down2 { background-image: linear-gradient(to bottom, brown, white 30% 70%, orange); }
div {height:100px; width:600px; }
</style>
</head>
<body>
<table align="center" style="width: 600px">
<tr>
<td>
<p>{ background-image: linear-gradient( red, white); }</p>
<div class="top_down"></div><br>
<p>{ background-image: linear-gradient( to right, blue, white); }</p>
<div class="to_right"></div><br>
<p>(direction color-stop1 color_height, color-stop2 color_height ,...)</p>
<p>{ background-image: linear-gradient( to right, blue, white 30%); }</p>
<div class="to_right1"></div><br>
<p>{ background-image: linear-gradient(to bottom right, #000, white); }</p>
<div class="to_bottom_right"></div><br>
<p>(direction color-stop1 color_height, color-stop2 color_height ,...)</p>
<p>{ background-image: linear-gradient(to bottom, blue, white 30px 70px, blue); }</p>
<div class="top_down1"></div><br>
<p>{ background-image: linear-gradient(to bottom, brown, white 30% 70%, orange); }</p>
<div class="top_down2"></div>
</td>
</tr>
</table>
</body>
</html>