Uses HSLa background-image to place a semi-transparent gradient over the top of any background color.

mixins-gradients-hsla.less

// Gradient Mixins
// ==============================

// HSLa Gradients
// Lays an HSLa alpha-transparency layer over top of any background color
// http://www.w3.org/TR/2003/CR-css3-color-20030514/#hsl-color
// http://css-tricks.com/yay-for-hsla/
// Be sure to use background-image NOT background,
//    to specify the gradient as the image ONLY, atop the underlying color
//
.gradient-standard() {
  background-image: -moz-linear-gradient(top,  hsla(0,0%,100%,0.1) 0%, hsla(0,0%,50%,0) 50%, hsla(0,0%,0%,0.1) 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(0,0%,100%,0.1)), color-stop(50%,hsla(0,0%,50%,0)), color-stop(100%,hsla(0,0%,0%,0.1)));
  background-image: -webkit-linear-gradient(top,  hsla(0,0%,100%,0.1) 0%,hsla(0,0%,50%,0) 50%,hsla(0,0%,0%,0.1) 100%);
  background-image: -o-linear-gradient(top,  hsla(0,0%,100%,0.1) 0%,hsla(0,0%,50%,0) 50%,hsla(0,0%,0%,0.1) 100%);
  background-image: -ms-linear-gradient(top,  hsla(0,0%,100%,0.1) 0%,hsla(0,0%,50%,0) 50%,hsla(0,0%,0%,0.1) 100%);
  background-image: linear-gradient(to bottom,  hsla(0,0%,100%,0.1) 0%,hsla(0,0%,50%,0) 50%,hsla(0,0%,0%,0.1) 100%);
  // http://www.colorzilla.com/gradient-editor/#ffffff+0,000000+100&0.1+0,0+50,0+100,0.1+100;Custom
  // Be sure to change background to background-image!!
}
.gradient-inverse() {
  background-image: -moz-linear-gradient(top,  hsla(0,0%,100%,0) 0%, hsla(0,0%,0%,0.1) 50%, hsla(0,0%,0%,0) 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(0,0%,100%,0)), color-stop(50%,hsla(0,0%,0%,0.1)), color-stop(100%,hsla(0,0%,0%,0)));
  background-image: -webkit-linear-gradient(top,  hsla(0,0%,100%,0) 0%,hsla(0,0%,0%,0.1) 50%,hsla(0,0%,0%,0) 100%);
  background-image: -o-linear-gradient(top,  hsla(0,0%,100%,0) 0%,hsla(0,0%,0%,0.1) 50%,hsla(0,0%,0%,0) 100%);
  background-image: -ms-linear-gradient(top,  hsla(0,0%,100%,0) 0%,hsla(0,0%,0%,0.1) 50%,hsla(0,0%,0%,0) 100%);
  background-image: linear-gradient(to bottom,  hsla(0,0%,100%,0) 0%,hsla(0,0%,0%,0.1) 50%,hsla(0,0%,0%,0) 100%);
  // http://www.colorzilla.com/gradient-editor/#ffffff+0,000000+50&0+0,0.1+50,0+100,0+100;Custom
  // Be sure to change background to background-image!!
}