Transparant image to see colored background

Question

I need to recreate this:

The gradient background must be seen through the shape of an image. But I don't know exactly how.

What I got now:

<div style="background-color: #fff; padding: 15px; border-radius: 10px; margin-bottom: 5px;">
    <div style="background: transparent url('image') 0% 0% no-repeat padding-box;">
    </div>
</div>

But this just hides the image completely.

Answer 1

Here is an idea using mask where I will consider an SVG taken from a font awesome icon : https://fontawesome.com/icons/heart?style=regular

.box {
  -webkit-mask:
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" ><path d="M458.4 64.3C400.6 15.7 311.3 23 256 79.3 200.7 23 111.4 15.6 53.6 64.3-21.6 127.6-10.6 230.8 43 285.5l175.4 178.7c10 10.2 23.4 15.9 37.6 15.9 14.3 0 27.6-5.6 37.6-15.8L469 285.6c53.5-54.7 64.7-157.9-10.6-221.3zm-23.6 187.5L259.4 430.5c-2.4 2.4-4.4 2.4-6.8 0L77.2 251.8c-36.5-37.2-43.9-107.6 7.3-150.7 38.9-32.7 98.9-27.8 136.5 10.5l35 35.7 35-35.7c37.8-38.5 97.8-43.2 136.5-10.6 51.1 43.1 43.5 113.9 7.3 150.8z" ></path></svg>') 
    center /  /* position of the heart */
    60% 60%   /* size of the heart */
    no-repeat,
    linear-gradient(#fff,#fff);
  -webkit-mask-composite:destination-out;
  mask-composite:exclude;
  width:200px;
  height:200px;
  background:#fff;
  border-radius:10px;
}

body {
  background:linear-gradient(to right,red,blue);
}

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