A snippet to easily create a gradient background on any element both horizontally and vertically

Sass Mapped Gradient Backgrounds

//==========================================================================
// gradient map set in project's _vars.scss file
//==========================================================================
$gradientMagentaOrange: (
     'color1': $gradientMagenta,
     'color2': $gradientOrange
);

//========================================================================================
// mixin created in project's mixins.scss - used in conjunction with autoprefixr/postcss
//========================================================================================
// Create CSS3 Gradient with solid fallback
// @param {Map} $gradientMap:       colour map object
// @param {HEX} $color1:            1st gradient colour
// @param {HEX} $color2:            2nd gradient colour
// @param {string} $orientation:    vertical/horizontal
// @param {string} $type:           gradient Direction for old IE
//
// eg:
//
// @include bgGradient($gradientPurpleBlue);
// @include bgGradient($gradientMagentaOrange, 'horizontal');
//=================================================================
@mixin bgGradient($gradientMap, $orientation: 'vertical') {

    $color1: map-get($gradientMap, 'color1');
    $color2: map-get($gradientMap, 'color2');

    $direction: 'to bottom';
    $type: 0;

    @if $orientation == 'horizontal' {
        $direction: 'to right';
        $type: 1;
    }

    background: $color1;
    background-repeat: no-repeat;
    background-position: 0 0;
    background: linear-gradient( unquote($direction), $color1 0%, $color2 100% );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$color1}', endColorstr='#{$color2}',GradientType=$type );

}