10 September 2011

A Sass linear gradient mixin

Here’s a nice and simple Sass mixin for a linear gradient including the legacy webkit declaration and some very awkward looking microsoft filters.

@mixin linear-gradient($top, $bottom, $base){

    background-image: -webkit-gradient(linear, center top, center bottom, from($top), to($bottom));

    background-image: -moz-linear-gradient(top, $top, $bottom);

    background-image: -o-linear-gradient(top, $top, $bottom);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#{$top}", endColorstr="#{$bottom}");

    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="\"#{$top}\"", endColorstr="\"#{$bottom}\"")";

    background: linear-gradient(right top, $top, $bottom);

    background-color: $base;

}

EDIT 12/1/12: Updated with the new spec