The word gradient has many different meanings, but in CSS, a gradient is strictly defined as a gradual transition between a range of (at least two) colours. CSS gradients are a fairly recent development but have already been through a number of changes. They were originally proposed by the WebKit team in April 2008, modified from the syntax proposed for the canvas element in HTML 5.
div {
background: -moz-linear-gradient(#FFF, #000);
background: -ms-linear-gradient(#FFF, #000);
background: -o-linear-gradient(#FFF, #000);
background: -webkit-linear-gradient(#FFF, #000);
}
You can see this in this example: ![A simple top-bottom, two-color linear gradient]()
ex1 { background: linear-gradient(left, #FFF, #000); }
ex2 { background: linear-gradient(right, #FFF, #000); }
ex3 { background: linear-gradient(225deg, #FFF, #000); }
These examples are shown here:
ex1 { background: linear-gradient(left, #000, #FFF, #000); }
ex2 { background: linear-gradient(left, #000, #FFF 75%, #000); }
ex3 { background: linear-gradient(bottom, #000, #FFF 20px, #000); }
ex4 { background: linear-gradient(45deg, #000, #FFF, #000, #FFF, #000); }
You can see the output here:
