Linear Gradient Background Sass Mixins

In this tutorial, I’m going to show you how-to create Sass mixins for linear gradient backgrounds.

Top to Bottom

// Background Gradient: Top to Bottom
@mixin bg-gradient-t2b($start-colour, $end-colour) {
    background-color: $start-colour;
    background-image: -webkit-gradient(linear, left top, left bottom, from($start-colour), to($end-colour));
    background-image: -webkit-linear-gradient(top, $start-colour, $end-colour);
    background-image:    -moz-linear-gradient(top, $start-colour, $end-colour);
    background-image:     -ms-linear-gradient(top, $start-colour, $end-colour);
    background-image:      -o-linear-gradient(top, $start-colour, $end-colour);
    background-image:         linear-gradient(top, $start-colour, $end-colour);
    filter:            progid:DXImageTransform.Microsoft.gradient(start-colourStr='#{$start-colour}', end-colourStr='#{$end-colour}');
}

Usage:

@include bg-gradient-t2b(start colour, end colour);

start colour refers to the top colour and the end colour refers to the bottom colour.

Example based on the usage:

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

Based on the example above, the CSS that would be outputted is:

  background-color: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
  background-image: -webkit-linear-gradient(top, #fff, #000);
  background-image: -moz-linear-gradient(top, #fff, #000);
  background-image: -ms-linear-gradient(top, #fff, #000);
  background-image: -o-linear-gradient(top, #fff, #000);
  background-image: linear-gradient(top, #fff, #000);
  filter: progid:DXImageTransform.Microsoft.gradient(start-colourStr='#fff', end-colourStr='#000');

Left to Right

// 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(start colour, end colour);

start colour refers to the left side colour and the end colour refers to the right side colour.

Example based on the usage:

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

Based on the example above, the CSS that would be outputted is:

background-color: #fff;
background-image: -webkit-gradient(linear, left top, right top, from(#fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff, #000);
background-image: -moz-linear-gradient(left, #fff, #000);
background-image: -ms-linear-gradient(left, #fff, #000);
background-image: -o-linear-gradient(left, #fff, #000);
background-image: linear-gradient(left, #fff, #000);
filter: progid:DXImageTransform.Microsoft.gradient(start-colourStr='#fff', end-colourStr='#000', gradientType='1');