Gradient Mask Demo

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Gradient Mask Demo</title>
    <style>
        /* LAYOUT */
        body { margin: 20px; }

        .box {
            margin-bottom: 20px;
            height: 30px;
            border-radius: 8px;
        }

        /* FIRST MASK */
        .box {
            background-image: linear-gradient(
                rgba(255, 255, 255, .4),
                transparent
            );
        }

        /* SECOND MASK - cascades the previous */
        .box-striped {
            background-image: linear-gradient(-45deg,
                rgba(255, 255, 255, .2) 25%, transparent 25%,
                transparent 50%, rgba(255, 255, 255, .2) 50%,
                rgba(255, 255, 255, .2) 75%, transparent 75%,
            );
            background-size: 40px 40px;
        }

        /* COLORS */
        .box         { background-color: blue; }
        .box-success { background-color: green; }
        .box-warning { background-color: orange; }
        .box-danger  { background-color: red; }
        .box-muted   { background-color: gray; }
        
        .box:hover   { background-color: black; }
    </style>
</head>

<body>
    <!-- Show how the mask looks in black and white. -->
    <div class="box" style="background-color: white"></div>

    <div class="box"></div>
    <div class="box box-striped"></div>

    <div class="box box-success"></div>
    <div class="box box-success box-striped"></div>

    <div class="box box-warning"></div>
    <div class="box box-warning box-striped"></div>

    <div class="box box-danger"></div>
    <div class="box box-danger box-striped"></div>
    
    <div class="box box-muted"></div>
    <div class="box box-muted box-striped"></div>
</body>
</html>





































<!-- SASS -->
<style>.box {background-image: -webkit-linear-gradient(rgba(255, 255, 255, .4) 0%, transparent 100%,transparent);background-image: -moz-linear-gradient(rgba(255, 255, 255, .4) 0%, transparent 100%,transparent);background-image: -o-linear-gradient(rgba(255, 255, 255, .4) 0%, transparent 100%,transparent);background-image: -ms-linear-gradient(rgba(255, 255, 255, .4) 0%, transparent 100%,transparent);}.box-striped {background-image: -webkit-linear-gradient(-45deg,rgba(255, 255, 255, .2) 0%,rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%, transparent 75%,transparent 100%);background-image: -moz-linear-gradient(-45deg,rgba(255, 255, 255, .2) 0%,rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%, transparent 75%,transparent 100%);background-image: -o-linear-gradient(-45deg,rgba(255, 255, 255, .2) 0%,rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%, transparent 75%,transparent 100%);background-image: -ms-linear-gradient(-45deg,rgba(255, 255, 255, .2) 0%,rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%, transparent 75%,transparent 100%);-webkit-background-size: 40px 40px;-moz-background-size: 40px 40px;}</style>