<!DOCTYPE>

<html>
<head>
  <style>
    .container {
        height: 300px;
        width: 400px;
        border: 2px solid black;
        overflow: hidden;
    }

    .box {
        height: 300px;
        width: 410px;
        border: 1px solid black;
        background-color: gray;
    }

    .composited {
        -webkit-transform: translateZ(0);
    }

    .masked {
        -webkit-mask-image: url(../resources/alpha-gradient.png);
        -webkit-mask-repeat: repeat-x;
    }
  </style>
</head>
<body>

    <div class="composited container">
        <div class="composited masked box"></div> 
    </div>

</body>
</html>