CSS - Linear gradient
The CSS linear-gradient() function creates an image which represents a linear gradient of colors. [...] Linear gradients are defined by an axis, the gradient line, with each point on it being of a different color. Perpendicular lines to the gradient-line have one single color, the one of the point on the gradient line. CSS linear-gradient on MDN
Implementation with vendor prefixes borrowed from CSS3 Please!
angle gradient
.angle-gradient {
background-color: {{color1}}; /* default/fallback background */
background-image: -webkit-linear-gradient({{angle}}deg, {{color1}}, {{color2}}); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
background-image: linear-gradient({{angle}}deg, {{color1}}, {{color2}}); /* Chrome 26, Firefox 16+, IE 10+, Opera */
}
vertical gradient
.vertical-gradient {
background-color: {{color1}}; /* default/fallback background */
background-image: -webkit-linear-gradient(top, {{color1}}, {{color2}}); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
background-image: linear-gradient(to bottom, {{color1}}, {{color2}}); /* Chrome 26, Firefox 16+, IE 10+, Opera */
}