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

angle of gradient axis in degrees
1
405

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 */
}
css
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 */
}
css

Notes

last update: