Utilizing the drop-shadow filter can be advantageous in this scenario, especially when combined with masking techniques such as the following:
.box {
height:300px;
background:url(https://picsum.photos/id/1072/800/600) center/cover;
overflow:hidden;
}
.box div {
filter:drop-shadow(0 0 5px black);
height:100%;
}
.box div::before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:lightblue;
-webkit-mask:
/* your mask here */
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><text x="0" y="12" font-family="Arial, Helvetica, sans-serif" >A</text></svg>') left/33% auto,
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><text x="0" y="12" font-family="Arial, Helvetica, sans-serif" >B</text></svg>') center/33% auto,
linear-gradient(#fff 0 0) right 10% top 50%/30% 80%,
/* end of your mask*/
linear-gradient(#fff 0 0);
-webkit-mask-composite:destination-out;
mask-composite:exclude;
-webkit-mask-repeat:no-repeat;
}
<div class="box">
<div></div>
</div>
By incorporating a specific mask into your code snippet, you can achieve the desired effect:
.box {
height:300px;
background:url(https://picsum.photos/id/1072/800/600) center/cover;
overflow:hidden;
}
.box div {
filter:drop-shadow(0 0 5px black);
height:100%;
}
.box div::before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:lightblue;
-webkit-mask:
url('https://i.ibb.co/JspDMsM/thebirds-mask3.png') center/contain no-repeat,
linear-gradient(#fff 0 0);
-webkit-mask-composite:destination-out;
mask-composite:exclude;
-webkit-mask-repeat:no-repeat;
}
<div class="box">
<div></div>
</div>