css linear gradient
Linear Gradients show smooth transitions between two or more specified colors. This example starts at the left as white and transitions to sky blue:
Code
<style>
#mygradient {
height: 400px;
width:400px;
/* Deprecated syntax for old browsers */
background: -prefix-linear-gradient(left, white, skyblue);
/* The new syntax needed by standard-compliant browsers (Opera 12.1, IE 10, Firefox 16, Chrome 26, Safari 6.1), without prefix */
background: linear-gradient(to right, white, skyblue);
}
</style>
</head>
<body>
<div id="mygradient"></div>
#mygradient {
height: 400px;
width:400px;
/* Deprecated syntax for old browsers */
background: -prefix-linear-gradient(left, white, skyblue);
/* The new syntax needed by standard-compliant browsers (Opera 12.1, IE 10, Firefox 16, Chrome 26, Safari 6.1), without prefix */
background: linear-gradient(to right, white, skyblue);
}
</style>
</head>
<body>
<div id="mygradient"></div>