[codepenembed height=”300″ themeid=”16787″ slughash=”xGBjvV” defaulttab=”result” user=”brandonhimpfen”]See the Pen Left to Right Linear Gradient Background by Brandon Himpfen (@brandonhimpfen) on CodePen.[/codepen_embed]The following Sass mixin will create a horizontal background gradient, also known as a left to right (or right to left) background gradient.

// Horizontal (Left to Right) Background Gradient
// See:  http://www.himpfen.com/horizontal-background-gradient-sass-mixin/
// Usage: @include bg-gradient-horizontal(start, end);
// Example: @include bg-gradient-horizontal(#fff, #000);
@mixin bg-gradient-horizontal($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');
}

To use the horizontal background gradient Sass mixin, include the following:

@include bg-gradient-horizontal(start, bottom);

Where start is the starting colour (left) and end is the ending colour (right).

Example:

@include bg-gradient-horizontal(#fff, #000);