transparent-gradient-mask.scss

// <!-- IE and EDGE unsupported -->
@mixin transparent-gradient-mask($direction: 'to bottom', $from: rgba(0,0,0,1), $to: rgba(0,0,0,0)) {
    // -webkit-mask-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
    -webkit-mask-image: linear-gradient(unquote($direction), $from, $to);
    mask-image: linear-gradient(unquote($direction), $from, $to);
}

.pane {
    position: relative;
    display: block;
    margin: 150px auto;
    width: 300px;
    height: 300px;
    background: #ccc;
    @include transparent-gradient-mask('to right', rgba(0,0,0,.8));
}