Create a left to right linear gradient background easily using a Sass mixin.
Sass Mixin
// Background Gradient: Left to Right
@mixin bg-gradient-l2r($start-colour, $end-colour) {
background-color: $start-colour;
background-image: -webkit-gradient(linear, left top, right top, from($start-colour), to($end-colour));
background-image: -webkit-linear-gradient(left, $start-colour, $end-colour);
background-image: -moz-linear-gradient(left, $start-colour, $end-colour);
background-image: -ms-linear-gradient(left, $start-colour, $end-colour);
background-image: -o-linear-gradient(left, $start-colour, $end-colour);
background-image: linear-gradient(left, $start-colour, $end-colour);
filter: progid:DXImageTransform.Microsoft.gradient(start-colourStr='#{$start-colour}', end-colourStr='#{$end-colour}', gradientType='1');
}
Usage
@include bg-gradient-l2r(#CDDC39, #9C27B0);
Replace #CDDC39
with the start colour and #9C27B0
with the end colour.