Masking of image and gradient

I am not getting the masking image from the below code. Please help me out to get the solution.

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Masking Practise</title>

<style type="text/css">

    .bcenter{

        border: none;

        text-align: center;

    }

    img{

        width: 200px;

        height: 100px;

    }

    #masked{

        width: 200px;

        height: 100px;

        -webkit-mask-box-image:url(images/cake2.jpg)

    }

    #linear-masked{

    width: 200px;

    height: 100px;

    /* -webkit-mask-image: -webkit-gradient(linear, right top, right bottom, from (rgba(0,0,0,0)), to(rgba(0,0,0,0.9))); */

    -webkit-mask-image: -webkit-gradient(linear, right top, right bottom, from (rgba(0,0,0,0)), to(rgba(0,0,0,0.9)));

}

</style>
<section class="bcenter">

    <h1>Examples of Masking</h1>

    <h2>Masking image by an image</h2>

    <h3>Original image</h3>

    <img src="images/cake.jpg">

    <img src="images/cake2.jpg">

    <h3>Using Masking effect</h3>

    <img src="images/cake.jpg" id="masked">

    <h2>Masking image by Linear gradient</h2>

   

    <img src="images/cake.jpg" id="linear-masked">

</section>