Degradado CSS3, se pude usar en fondos, cuadros, etc.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
<head>
<title>Degradado CSS 3</title>
<style type="text/css">
div{
border: 1px solid #000;
padding:10px;
margin: 20px;
height: 130px;
width: 230px;
float: left;
}
.degradado1{
background: -webkit-linear-gradient(orange, pink);
background: -moz-linear-gradient(orange, pink);
background: -o-linear-gradient(orange, pink);
background: linear-gradient(orange, pink);
}
.degradado2{
background: -webkit-linear-gradient(top left, #fff, #f66);
background: -moz-linear-gradient(top left, #fff, #f66);
background: -o-linear-gradient(top left, #fff, #f66);
background: linear-gradient(top left, #fff, #f66);
}
.degradado3{
background: -webkit-linear-gradient(180deg, #f0f, #f66);
background: -moz-linear-gradient(180deg, #f0f, #f66);
background: -o-linear-gradient(180deg, #f0f, #f66);
background: linear-gradient(180deg, #f0f, #f66);
}
.degradado4{
background: -webkit-linear-gradient(#00f 50%, #000);
background: -moz-linear-gradient(#00f 50%, #000);
background: -o-linear-gradient(#00f 50%, #000);
background: linear-gradient(#00f 50%, #000);
}
.degradado5{
background: -webkit-linear-gradient(45deg, #66f, #f80, #ffc);
background: -moz-linear-gradient(45deg, #66f, #f80, #ffc);
background: -o-linear-gradient(45deg, #66f, #f80, #ffc);
background: linear-gradient(45deg, #66f, #f80, #ffc);
}
.degradado6{
background: -webkit-linear-gradient(45deg, #66f 10%, #f80 30%, #ffc 60%);
background: -moz-linear-gradient(45deg, #66f 10%, #f80 30%, #ffc 60%);
background: -o-linear-gradient(45deg, #66f 10%, #f80 30%, #ffc 60%);
background: linear-gradient(45deg, #66f 10%, #f80 30%, #ffc 60%);
}
.degradado7{
background: -webkit-linear-gradient(45deg, #66f 160px, #f80 180px, #ffc);
background: -moz-linear-gradient(45deg, #66f 160px, #f80 180px, #ffc);
background: -o-linear-gradient(45deg, #66f 160px, #f80 180px, #ffc);
background: linear-gradient(45deg, #66f 160px, #f80 180px, #ffc);
}
.degradado8{
background: -webkit-linear-gradient(left, #f00, #f80, #ff0, #0f0, #00f, #60f, #c0f);
background: -moz-linear-gradient(left, #f00, #f80, #ff0, #0f0, #00f, #60f, #c0f);
background: -o-linear-gradient(left, #f00, #f80, #ff0, #0f0, #00f, #60f, #c0f);
background: linear-gradient(left, #f00, #f80, #ff0, #0f0, #00f, #60f, #c0f);
}
</style>
</head>
<body>
<div class="degradado1"></div>
<div class="degradado2"></div>
<div class="degradado3"></div>
<div class="degradado4"></div>
<div class="degradado5"></div>
<div class="degradado6"></div>
<div class="degradado7"></div>
<div class="degradado8"></div>
</body>
</html>
