Top to Bottom Linear Background Gradient Sass Mixin

Learn how-to create a top to bottom linear background gradient easily using a Sass mixin.

Sass Mixin

    // 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(#FFC107, #E91E63);

Change #FFC107 to the start colour and #E91E63 to the end colour.