gradient.scss

# Mixin
@mixin gradient-background($start, $end) {
    background: $start; /* Old browsers */
    background: -moz-linear-gradient(top, $start 0%, $end 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$start), color-stop(100%,$end)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, $start 0%,$end 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, $start 0%,$end 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, $start 0%,$end 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start', endColorstr='$end',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, $start 0%,$end 100%); /* W3C */
}

# Call
@include gradient-background(rgba(255,255,255,0.5), rgba(0,0,0,0.5))