â ī¸ Warning â ī¸ Deprecated Code! This video tutorial contains outdated code.
đĄ If you wish to update it, any AI assistant will update the code for you in seconds.
đĄ If you wish to update it, any AI assistant will update the code for you in seconds.
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>