Linear Gradient Background Tutorial
Learn the various parameters and values associated with CSS linear-gradient() and repeating-linear-gradient() that can be used as the background setting for HTML elements. We also explain linear gradient color stops and angles.
<!DOCTYPE HTML>
<html>
<head>
<style>
div{float:left; width:300px; height:100px; margin:4px; color:#FFF; font-size:30px; padding:20px;}
div.gradient1{
background: #999;
background: -webkit-linear-gradient(turquoise, #000);
background: -moz-linear-gradient(turquoise, #000);
background: -ms-linear-gradient(turquoise, #000);
background: -o-linear-gradient(turquoise, #000);
background: linear-gradient(turquoise, #000);
}
div.gradient2{
background: -webkit-linear-gradient(turquoise, transparent, magenta);
background: -moz-linear-gradient(turquoise, transparent, magenta);
background: -ms-linear-gradient(turquoise, transparent, magenta);
background: -o-linear-gradient(turquoise, transparent, magenta);
background: linear-gradient(turquoise, transparent, magenta);
}
div.gradient3{
background: -webkit-linear-gradient(turquoise 30%, #000, magenta 70%);
background: -moz-linear-gradient(turquoise 30%, #000, magenta 70%);
background: -ms-linear-gradient(turquoise 30%, #000, magenta 70%);
background: -o-linear-gradient(turquoise 30%, #000, magenta 70%);
background: linear-gradient(turquoise 30%, #000, magenta 70%);
}
div.gradient4{
background: -webkit-linear-gradient(turquoise 30%, #000 30%, black 70%, magenta 70%);
background: -moz-linear-gradient(turquoise 30%, #000 30%, black 70%, magenta 70%);
background: -ms-linear-gradient(turquoise 30%, #000 30%, black 70%, magenta 70%);
background: -o-linear-gradient(turquoise 30%, #000 30%, black 70%, magenta 70%);
background: linear-gradient(turquoise 30%, #000 30%, black 70%, magenta 70%);
}
div.gradient5{
background: -webkit-linear-gradient(bottom, turquoise, black, magenta);
background: -moz-linear-gradient(bottom, turquoise, black, magenta);
background: -ms-linear-gradient(bottom, turquoise, black, magenta);
background: -o-linear-gradient(bottom, turquoise, black, magenta);
background: linear-gradient(bottom, turquoise, black, magenta);
}
div.gradient6{
background: -webkit-linear-gradient(bottom left, turquoise, black, magenta);
background: -moz-linear-gradient(bottom left, turquoise, black, magenta);
background: -ms-linear-gradient(bottom left, turquoise, black, magenta);
background: -o-linear-gradient(bottom left, turquoise, black, magenta);
background: linear-gradient(bottom left, turquoise, black, magenta);
}
div.gradient7{
background: -webkit-linear-gradient(45deg, turquoise, black, magenta);
background: -moz-linear-gradient(45deg, turquoise, black, magenta);
background: -ms-linear-gradient(45deg, turquoise, black, magenta);
background: -o-linear-gradient(45deg, turquoise, black, magenta);
background: linear-gradient(-45deg, turquoise, black, magenta);
}
div.gradient8{
background: -webkit-repeating-linear-gradient(turquoise, black 20px, magenta 40px);
background: -moz-repeating-linear-gradient(turquoise, black 20px, magenta 40px);
background: -ms-repeating-linear-gradient(turquoise, black 20px, magenta 40px);
background: -o-repeating-linear-gradient(turquoise, black 20px, magenta 40px);
background: repeating-linear-gradient(turquoise, black 20px, magenta 40px);
}
div.gradient9{
background: -webkit-repeating-linear-gradient(top right, turquoise, black 20px, magenta 40px);
background: -moz-repeating-linear-gradient(top right, turquoise, black 20px, magenta 40px);
background: -ms-repeating-linear-gradient(top right, turquoise, black 20px, magenta 40px);
background: -o-repeating-linear-gradient(top right, turquoise, black 20px, magenta 40px);
background: repeating-linear-gradient(top right, turquoise, black 20px, magenta 40px);
}
</style>
</head>
<body>
<div class="gradient1">1</div>
<div class="gradient2">2</div>
<div class="gradient3">3</div>
<div class="gradient4">4</div>
<div class="gradient5">5</div>
<div class="gradient6">6</div>
<div class="gradient7">7</div>
<div class="gradient8">8</div>
<div class="gradient9">9</div>
</body>
</html>