Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

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>
thumb

CSS Videos

Background and Overlay Effects

Multiple Background Images TutorialTheater Mode Overlay Tutorial Javascript Light Switch Toggle DarkFixed Header and Footer Div Layout TutorialLinear Gradient Background TutorialRadial Gradient Background TutorialVideo Background Tutorial Plus Youtube Embed