.masked {
  width: 100px;
  height: 100px;
  background-color: var(--color, #FF0000);
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 166"><polygon  points="83 26.8 65.7 61.8 27.1 67.4 55 94.7 48.5 133.2 83 115 117.5 133.2 111 94.7 138.9 67.4 100.3 61.8 83 26.8 83 26.8"/></svg>');
 
}


/* URL jedine takto, jinak interpolace v URL nefunguje! */
:root {
  --url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");
}

body {
  background: var(--url);
}



.mask img {
	
	-webkit-mask-image: url("https://cdn.rjwebdesign.cz/smile.png");
	-webkit-mask-repeat: no-repeat;
  	-webkit-mask-position: center;
  	-webkit-mask-size: 100%;
}

.mask2 img {
	-webkit-mask-image: linear-gradient(#000, transparent);
}

.mask3 img {
	-webkit-mask-image: linear-gradient(#000 50%, transparent 50%);
}